So you want to do something like this:
|SELECT 1|
If the User selects 'Apples', then:
|SELECT 2|
But if the User selects 'Orange', then:
|SELECT 2|
- Juice
- Strawberry Banana
- you glad you have a sense of humor?
instead. Is this the idea?
This would be easy enough to implement; all you have to do is dynamically create the options for each select box when the onchange event fires from the previous select. In other words:
[HTML]
<select id="cat1" onchange="loadOptions('cat2', this);">
<option ...>
</select>
<select id="cat2" onchange="loadOptions('cat3', this);">
etc.
[/HTML]
-
function loadOptions(target, source) {
-
-
var callback = function(response) {
-
// Load options.
-
var options = eval('(' + response + ')');
-
-
/*
-
Assume that ajaxLoadOptions makes an ajax call and returns a JSON-format string. E.g., assume that options = {
-
one: 'juice',
-
two: 'cider',
-
three: 'of my eye'
-
}
-
*/
-
-
// Remove options from the target.
-
while(target.firstChild)
-
target.removeChild(target.firstChild);
-
-
// Append new options.
-
for(idx in options) {
-
var newElement = document.createElement('option');
-
newElement.setAttribute('value', idx);
-
// You might be able to use newElement.text here.
-
newElement.firstChild.nodeValue = options[idx];
-
target.appendChild(newElement);
-
}
-
};
-
-
ajaxLoadOptions(source, callback);
-
}
-