|
|
|
Script: Cascading Dropdowns
Author: Ioannis Cherouvim
Date : 2006-09-15
Demo : http://temp.cherouvim.com/forums/cascading-dropdowns/
An unobtrusive javascript function which binds dropdowns together in order to apply cascading behaviour. Child (cascaded) dropdown has a class pointing to the value of the father dropdown.
If javascript is not enabled, your application will run. The user will just get to see all the possible child dropdown options, which is better than seeing nothing (as in 100% javascript based cascading dropdowns).
Multiple dropdowns can be linked together.
--- HTML ---
| <label for="categories">categories: </label>
<select name="categories" id="categories">
<option value="1">people</option>
<option value="2">food</option>
<option value="3">computer parts</option>
<option value="4">other</option>
</select>
<label for="items">items: </label>
<select name="items" id="items">
<option class="1" value="0">john</option>
<option class="1" value="1">george</option>
<option class="1" value="2">maria</option>
<option class="1" value="3">kostas</option>
<option class="1" value="4">petros</option>
<option class="1" value="5">aleksis</option>
<option class="1" value="6">nikos</option>
<option class="1" value="7">niki</option>
<option class="1" value="8">haris</option>
<option class="2" value="9">banana</option>
<option class="2" value="10">milo</option>
<option class="2" value="11">souvlaki</option>
<option class="2" value="12">pagoto</option>
<option class="2" value="13">beer</option>
<option class="2" value="14">water</option>
<option class="2" value="15">cocacola</option>
<option class="2" value="16">patates</option>
<option class="3" value="17">othoni</option>
<option class="3" value="18">pliktrologio</option>
<option class="3" value="19">mouse</option>
<option class="3" value="20">HD</option>
<option class="3" value="21">floppy</option>
<option class="3" value="22">modem</option>
<option class="3" value="23">router</option>
<option class="3" value="24">TFT</option>
<option class="4" value="25">foo</option>
<option class="4" value="26">bar</option>
</select> | |
----- JAVASCRIPT -----
| //Applies cascading behavior for the specified dropdowns
function applyCascadingDropdown(sourceId, targetId) {
var source = document.getElementById(sourceId);
var target = document.getElementById(targetId);
if (source && target) {
source.onchange = function() {
displayOptionItemsByClass(target, source.value);
}
displayOptionItemsByClass(target, source.value);
}
}
//Displays a subset of a dropdown's options
function displayOptionItemsByClass(selectElement, className) {
if (!selectElement.backup) {
selectElement.backup = selectElement.cloneNode(true);
}
var options = selectElement.getElementsByTagName("option");
for(var i=0, length=options.length; i<length; i++) {
selectElement.removeChild(options[0]);
}
var options = selectElement.backup.getElementsByTagName("option");
for(var i=0, length=options.length; i<length; i++) {
if (options[i].className==className)
selectElement.appendChild(options[i].cloneNode(true));
}
}
//Binds dropdowns
function applyCascadingDropdowns() {
applyCascadingDropdown("categories", "items");
//We could even bind items to another dropdown
//applyCascadingDropdown("items", "foo");
}
//execute when the page is ready
window.onload=applyCascadingDropdowns; | |
|
|
| Builds JavaScript that updates the contents of one selector based on another.
Categories : HTML, Java Script, PHP, Complete Programs, General | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page?
Categories : Java Script, HTML | | | Prevent Right Mouse steal your graphics
Categories : HTML, Java Script, Security | | | Cool tool tip
Categories : Java Script, HTML, Web Design | | | Conditional Check - a script that allows a user to submit a form only if the user check a checkbox.
Categories : HTML, Java Script, Form Processing, Beginner Guides | | | Javascript linked dropdowns
Categories : Java Script, HTML, Classes and Objects | | | Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | complete simply working javascript password generator file. Use letter, vowels, consonants (uppercase and lowercase) arrays to create a really random and secure password.
improved security using time functions to initialize random number generator.
Categories : Java Script, HTML, Security, Authentication, Strings | | | Bookmarklets are simple tools that extend the surf and
search capabilities of Netscape and Explorer web browsers.
Categories : Java Script, HTML, General | | | How to get the Focus (Cursor) into a Form-Element.
Categories : HTML, Java Script | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | Bouncing Marquee at Status Bar
Categories : Java Script, HTML, Browsers | |
|
|
|
