Home arrow Style Sheets arrow A More Complex Way of Building Replacement Combo Boxes
STYLE SHEETS

A More Complex Way of Building Replacement Combo Boxes


In part one we looked at an easy way to recreate the functionality of combo boxes, while also creating the ability to style them effectively across browsers. In this part, we're going to work on getting rid of the hard coding of option values in the event handlers for the options, and look at dealing with combo boxes that have more options. You'll need the source files from part one to build on, and your trusty text editor at your side.

Author Info:
By: Dan Wellman
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
April 10, 2007
TABLE OF CONTENTS:
  1. · A More Complex Way of Building Replacement Combo Boxes
  2. · Increasing our Options
  3. · Data Storage Format
  4. · Extracting the Data

print this article
SEARCH DEVARTICLES

A More Complex Way of Building Replacement Combo Boxes
(Page 1 of 4 )

First of all, we can look at getting rid of the hard-coded option values that are sent to the JavaScript file in the onclick event of each element. We will still be sending a parameter, but instead of using the text that forms the option in the drop-down div, we can use the this keyword instead. Change the onclick function calls in the replacementcombos.html file to look like this (no pun intended):

<div id="combodiv">
 
<a class="option" href="#" onclick="setOption(this)">Option 1</a>
 
<a class="option" href="#" onclick="setOption(this)">Option 2</a>
 
<a class="option" href="#" onclick="setOption(this)">Option 3</a>
 
<a class="option" href="#" onclick="setOption(this)">Option 4</a>
 
<a class="option" href="#" onclick="setOption(this)">Option 5</a>
 
<a class="option" href="#" onclick="setOption(this)">Option 6</a>
 
<a class="option" href="#" onclick="setOption(this)">Option 7</a>
 
<a class="option" href="#" onclick="setOption(this)">Option 8</a>
 
<a class="option" href="#" onclick="setOption(this)">Option 9</a>
 
<a class="option" href="#" onclick="setOption(this)">Option 10</a>
</div>

Ok, so we now have no hard-coded values, just the this keyword. In this example, this refers to the element that the onclick is a property of. So when the user clicks on an option, the function is called and the parameter refers to whichever anchor element (option) was clicked instead of just being passed the text that we want to add to the text field.

We now have to use a little DOM jiggery-pokery to get at the actual text content. In the combo.js file, change the setOption() function so that it appears as follows:

function setOption(element) {
  
var selection = element.childNodes[0].nodeValue;
  
var combo = document.getElementById('combofield').value = selection;
  
document.getElementById('combodiv').style.display = "none";
  
comboopenflag = "off";
}

The text that the visitor sees as an option in the combo div is a textNode in the DOM, and appears as a child of the a element. So element.childNodes[0] refers to the first child of the a element and the actual text is contained in the nodeValue property. Other than this, the function is exactly the same as before. So we've gotten rid of the hard-coded option values and the page functions pretty much as it did before. Next we should adjust it to handle combo boxes with more options.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials