I have 2 dropdown list in my html. Is possible for me to populate the option values in the second dropdown list depend on what I select in the first one?
Thank you.
I've written two short scripts here that give you two different ways of populating your select lists. The first way will simply populate text in the options that you have already created. The second way actually create options and fill them with text.
To specify what you want in the second select list change the value of the options in the first. eg in stead of value="A"; value="yourtext"
Also it is design so that if you select the second option in the first select the second option in the second select will be filled in. If you select the third select in the first that the third select is filled in the second......and so on.
Copy this code into a page and fool around for it. I know it works with IE but not sure about all the other browsers.
Code:
<html>
<script>
function populateSecondSelect()
{
window.document.frmSelect.secondSelect.options[window.document.frmSelect.firstSelect.selectedIndex].text = window.document.frmSelect.firstSelect.options[document.frmSelect.firstSelect.selectedIndex].value
}
function makesecondselect()
{
window.document.testSelect.test2Select.options[window.document.testSelect.test1Select.selectedIndex] = new Option(window.document.testSelect.test1Select.options[window.document.testSelect.test1Select.selectedIndex].value)
}
</script>
<body>
Using this way the text in the second select list is just changed according to the value in the first.
<form name="frmSelect" method="POST">
<select name="firstSelect" onChange="populateSecondSelect()">
<option selected value="Select One">Select One</option>
<option value="A">a</option>
<option value="B">b</option>
</select><br><br>
<select name="secondSelect">
<option selected>Select One</option>
<option></option>
<option></option>
</select>
</form><br><br>
Using this method the options within the select menu are actually created on the fly rather than just being changed.
<form name="testSelect" method="POST">
<select name="test1Select" onChange="makesecondselect()">
<option selected value="Select One">Select One</option>
<option value="A">a</option>
<option value="B">b</option>
</select><br><br>
<select name="test2Select">
<option selected>Select One</option>
</select>
</form>
</body>
</html>
If the above script doesn't work in other browsers,
Try using document.getElementById('object_id') to access them instead.
Btw, if you populate a dropdown list you cannot set the selectedIndex property immidiately after it's been populated. The browser simply won't select the option you want.
To get around this do
setTimeout("document.getElementById("+a_variable_w ith_the_list_id+").selectedIndex="+a_var_with_the_ index+")",10)
That will solve the problem.
Along the same lines, does anyone have any idea why this code below is not working in IE 5 for Mac? I know that browser is notorious for its NON-standards-compliance, but a lot of our users use it. It works on every other browser I've tested on (IE 6 Win, Firefox Mac and Win, NS 7 Mac and Win, Opera 7 Mac and Win, and others). The problem is, the second drop-down populates correctly; the top drop-down works as expected, but it ONLY shows the CURRENTLY selected option; the other options are blank. You can select a different option and when it is selected, its value shows up but the others are blank. (Does that make sense?)
Code:
<script type="text/javascript" language="Javascript">
// Populate the flavors drop-down menu, based on which Ensure product is selected
function setOptions(f, chosen) {
var selbox = f.flavor;
selbox.options.length = 0;
// Arthritis options:
if (f == document.ensure_arth_form) {
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select a product first',' ');
}
if (chosen == "ensure_complete_balanced") {
selbox.options[selbox.options.length] = new Option('Butter Pecan','butter_pecan');
selbox.options[selbox.options.length] = new Option('Chocolate','chocolate');
selbox.options[selbox.options.length] = new Option('Coffee Latte','coffee_latte');
selbox.options[selbox.options.length] = new Option('Strawberry','strawberry');
selbox.options[selbox.options.length] = new Option('Vanilla','vanilla');
}
if (chosen == "ensure_plus") {
selbox.options[selbox.options.length] = new Option('Butter Pecan','butter_pecan');
selbox.options[selbox.options.length] = new Option('Chocolate','chocolate');
selbox.options[selbox.options.length] = new Option('Strawberry','strawberry');
selbox.options[selbox.options.length] = new Option('Vanilla','vanilla');
}
if (chosen == "ensure_high_protein") {
selbox.options[selbox.options.length] = new Option('Banana','banana');
selbox.options[selbox.options.length] = new Option('Chocolate Royal','chocolate_royal');
selbox.options[selbox.options.length] = new Option('Vanilla Supreme','vanilla_supreme');
selbox.options[selbox.options.length] = new Option('Wild Berry','wild_berry');
}
if (chosen == "ensure_fiber_fos") {
selbox.options[selbox.options.length] = new Option('Chocolate','chocolate');
selbox.options[selbox.options.length] = new Option('Vanilla','vanilla');
}
}
// Cancer options:
else if (f == document.ensure_cancer_form) {
if (chosen == "ensure_plus") {
selbox.options[selbox.options.length] = new Option('Butter Pecan','butter_pecan');
selbox.options[selbox.options.length] = new Option('Chocolate','chocolate');
selbox.options[selbox.options.length] = new Option('Strawberry','strawberry');
selbox.options[selbox.options.length] = new Option('Vanilla','vanilla');
}
if (chosen == "ensure_high_protein") {
selbox.options[selbox.options.length] = new Option('Banana','banana');
selbox.options[selbox.options.length] = new Option('Chocolate Royal','chocolate_royal');
selbox.options[selbox.options.length] = new Option('Vanilla Supreme','vanilla_supreme');
}
}
}//setOptions
</script>
The script is used on 2 different forms. Here is it on ensure_arth_form. I've tried changing the value attributes of the options but that doesn't make a difference.
Code:
<p>Select Product:</p>
<select name="product" onchange="setOptions(document.ensure_arth_form, document.ensure_arth_form.product.options[document.ensure_arth_form.product.selectedIndex].value);">
<option value="ensure_flavors" selected="selected">Ensure® Complete, Balanced Nutrition</option>
<option value="ensure_plus_flavors">Ensure® Plus</option>
<option value="ensure_high_protein">Ensure® High Protein</option>
<option value="ensure_fiber_flavors">Ensure® Fiber with FOS</option>
</select>
<p>Select Flavor:</p>
<!-- this drop-down dynamically changes based on which product was selected above -->
<select name="flavor">
<option value="butter_pecan">Butter Pecan</option>
<option value="chocolate">Chocolate</option>
<option value="coffee_latte">Coffee Latte</option>
<option value="strawberry">Strawberry</option>
<option value="vanilla">Vanilla</option>
</select>
It sounds as if the browser doesn't update the list correctly until you "tell it to" by selecting an option. Don't ahave any good solution to this, maybe you could try to quickly loop through and select then deselect each option after a timeout. Then you set the selected value using the normal timeout after that. The user might notice a flickering in the selectbox though.
Linear Mode
