Hello,
I need to generate 3 select lists but the 2nd depends on the 1st and the 3rd depends on the 2nd.
To make it more difficult, the values are read from a database!
But just one thing at a time: First I need to generate dynamically select list.
Once I know how to do it, I will try to hide/show the other lists depending on the 1st list
Then I will try to think about how to populate those lists!
The 1st list is displayed. Once the user clicks on one name, a second list appears with the values depending on the 1st list.
Once the user chooses a value, another list should be shown The user can then submit the form.
Here is what I have written ("stolen from the web"). It works for two lists but I need it to work for 3 lists and I haven't managed to do so.
In additiong, the first time is not working since I get "No list available". I would need to have an "empty chose" as default so nothing would be shown on the 2nd list.
Once it is working, I need the 2nd and the 3rd list to be initially hidden. Once the user clicks on the value, the 2nd list is shown. Once the user clicks on the value, the 3rd list is show. Now, if the user changes the value of the 1st list, the 2nd list should be modified and the 3rd list should be hidden.
I would really appreciate if you could help me!
I need to generate 3 select lists but the 2nd depends on the 1st and the 3rd depends on the 2nd.
To make it more difficult, the values are read from a database!
But just one thing at a time: First I need to generate dynamically select list.
Once I know how to do it, I will try to hide/show the other lists depending on the 1st list
Then I will try to think about how to populate those lists!
The 1st list is displayed. Once the user clicks on one name, a second list appears with the values depending on the 1st list.
Once the user chooses a value, another list should be shown The user can then submit the form.
Here is what I have written ("stolen from the web"). It works for two lists but I need it to work for 3 lists and I haven't managed to do so.
In additiong, the first time is not working since I get "No list available". I would need to have an "empty chose" as default so nothing would be shown on the 2nd list.
Once it is working, I need the 2nd and the 3rd list to be initially hidden. Once the user clicks on the value, the 2nd list is shown. Once the user clicks on the value, the 3rd list is show. Now, if the user changes the value of the 1st list, the 2nd list should be modified and the 3rd list should be hidden.
I would really appreciate if you could help me!
Code:
<html>
<script language="JavaScript" type="text/javascript">
var store = new Array();
var prix = new Array();
store[0] = new Array(
'Black',
'Red');
store[1] = new Array(
'Yellow',
'White');
store[2] = new Array(
'Green',
'Blue',
'Brown');
prix[0] = new Array(
'Price1',
'Price2');
prix[1] = new Array(
'Price3',
'Price4');
prix[2] = new Array(
'Price4',
'Price5',
'Price6');
function populate()
{
var box = document.forms[0].first;
var number = box.options[box.selectedIndex].value;
if (!number) return;
var list = store[number];
var box2 = document.forms[0].second;
box2.options.length = 0;
for(i=0;i<list.length;i++)
{
box2.options[i] = new Option(list[i]);
}
}
</script>
<body>
<form action="#">
<select name="first" onchange="populate()">
<option value="0">Opel</option>
<option value="1">Renault</option>
<option value="2">Ford</option>
</select>
<select name="second"> [b]I would like to have something like onChange="populate1(). I have tried to modify populate but does not work [/b]
<option>No list available</option>
</select>
<select name="third">
<option>Price1</option>
<option>Price2</option>
</select>
</form>
</body>
</html>