Menu
I have noticed a few requests lately on the forum where there is a request for a dynamic dropdown list (<select…> tag)
that would display one set of options if one condition is met, but a different set of options if a different condition is chosen. 😮
This is my attempt to solve this problem for other users.
The following code is a template to show one way of how this question could be resolved.
[code]
<html>
<head>
<title>Selected Option Displays</title>
<script type=”text/javascript”>
/* Array format: Select Display | Array display | Include items
Select Display is <select id…> element to populate
Array Display is array containing information to populate next element
Include Items of Array Display to populate the <select id…> tag
*/
var Options1 = [
‘– Select –||0’,
‘Opt 2: 1. All|Options2|0,1,2,3,4,5,6’,
‘Opt 2: 2. Even|Options2|0,2,4,6’,
‘Opt 2: 3. Odd|Options2|0,1,3,5’ // Note: no comma after last entry
];
var Options2 = [
‘– Select –||0’,
‘Opt 3: 1. All|Options3|0,1,2,3,4,5,6,7,8,9,10’,
‘Opt 3: 2. Odd|Options3|0,1,3,5,7,9’,
‘Opt 3: 3. Even|Options3|0,2,4,6,8,10’,
‘Opt 3: 4. Threes|Options3|0,3,6,9’,
‘Opt 3: 5. Fours|Options3|0,4,8’,
‘Opt 3: 6. Fives|Options3|0,5,10’ // Note: no comma after last entry
];
var Options3 = [‘– Select –||0’,
‘ 1 A||’,’ 2 B||’,’ 3 C||’,’ 4 D||’,’ 5 E||’,
‘ 6 F||’,’ 7 G||’,’ 8 H||’,’ 9 I||’,’10 J||’];
Array.prototype.exists = function (x) {
for (var i = 0; i < this.length; i++) {
if (this[i] == x) return true;
}
return false;
}
function Populate(IDS,itemArr,incItems) {
var selElem = document.getElementById(IDS);
selElem.options.length = 0; var k = 0;
var tarr = []; var bypass = []; // temporary holding arrays
if (incItems == ”) { // current selections — show all if blank
for (var i=0; i<itemArr.length; i++) {
tarr = itemArr[i].split(‘|’); // create display, itemArray, include items
selElem.options[selElem.options.length] = new Option(tarr[0],itemArr[i]);
}
} else {
tarr = incItems.split(‘|’);
// bypas = tarr[1];
bypass = tarr[2].split(‘,’);
for (var j=0; j<bypass.length; j++) {
k = bypass[j]; // get entry to create item
tarr = itemArr[k].split(‘|’); // create display, itemArray, include items
selElem.options[selElem.options.length] = new Option(tarr[0],itemArr[k]);
}
}
}
function elem(IDS) { return document.getElementById(IDS); }
function ChoiceDisplay() { // for testing purposes only
var str = ‘Test display of choice results:n’;
str += elem(‘Options1′).value+’n’;
str += elem(‘Options2′).value+’n’;
str += elem(‘Options3’).value;
alert(str);
}
</script>
</head>
<body onload=”Populate(‘Options1’,Options1,”)”> <!– Initialize to ALL options –>
<!– Use next “onload” if desire is to initialize to fewer than all item –>
<!– body onload=”Populate(‘Options1′,Options1,’|Options1|0,1,2,3’)” –>
Option1: <select id=”Options1″ onchange=”Populate(‘Options2’,Options2,this.value)”></select>
<button onclick=”alert(elem(‘Options1’).value)”>1</button>
<p>
Option2: <select id=”Options2″ onchange=”Populate(‘Options3’,Options3,this.value)”></select>
<button onclick=”alert(elem(‘Options2’).value)”>2</button>
<p>
Option3: <select id=”Options3″></select>
<button onclick=”alert(elem(‘Options3’).value)”>3</button>
<p>
<button onclick=”ChoiceDisplay()”>Display Choices</button>
</body>
</html>
I’m currently working on an iMac, so the script has only been tested in FF and Safari browsers.
I’ll test with MSIE later when I have access to a different PC.
Might be possible to tighten the code a bit more, but for ease of understanding I think this is good enough as a first attempt.
Should be able to go beyond 3 levels of choices if desired.
It should be fairly easy to modify the ‘Options1, Option2, Options3 (etc) arrays to create the conditional conditions for a particular display for the user to select the options.
The options are dummy choices to show how the following displays are created with the particular list items to show on NEXT level.
Post back questions if the comments in the script are not complete enough.
Good Luck!
?