changing drop down menu

kanoorani · September 9th, 2005, 02:13 AM

hi again
i've 2 drop down menus in my page ... now ... if the user selects a value from the 1st drop down menu ... then the values of the 2nd drop down should be changed ... 4 example ... 1 menu is 4 Mobile Manufacturer ... having values, NOKIA, SONY ERICSSON, SAMSUNG, etc ... when the user selects NOKIA, then the 2nd menu i.e., Mobile Model, should display the values 4 NOKIA, like 6600, 7610, 6680, N-Gage ... and same proceedure 4 the other mobile manufacturers ... i hope u've got my point N u'll try u help me

w8ing 4 a good reply

interrupt · September 10th, 2005, 04:21 AM

I think this is what you are looking for. Save the following as a HTML file:

<html>
<head>
<title>
Changing Drop Down Values
</title>
</head>
<body>

<form name = "form1">
<h5>Manufacturer</h5><br>
<select name = "selectPhone" onchange = "getModel(document.form1.selectPhone.selectedIndex )">
<option select = 0>Please make a selection
<option value = 1>Samsung
<option value = 2>Ericsson
</option>
</select>
<br>
<h5>Model</h5>
<select name = "showModels">
</select>
</form>
<script language ="javascript">
function getModel(phoneModel){

        var noSelect = new Option("Please make a selection", "0")
            //Declare this option to tell the script what to do when the user selects the "Make a selection" option
        var samsung = new Array("Model 1", "Model2", "Model3")
            //You can store all your phone models in arrays
        var Ericsson = new Array("Model A", "Model B", "Model C")

        var showModelsSelect = document.form1.showModels
            //This references the showModels Select Box which will only change when the user makes a selection from the selectPhone select box

            if(phoneModel ==0){
            showModelsSelect.options.length =0
            showModelsSelect.options[0] = noSelect
            }

            if(phoneModel ==1){
showModelsSelect.options.length =0
            showModelsSelect.options[0] = new Option(samsung[0])
            showModelsSelect.options[1] = new Option(samsung[1])
            showModelsSelect.options[2] = new Option(samsung[2])
            }

            if(phoneModel ==2){
showModelsSelect.options.length =0
            showModelsSelect.options[0] = new Option(Ericsson[0])
            showModelsSelect.options[1] = new Option(Ericsson[1])
            showModelsSelect.options[2] = new Option(Ericsson[2])
}
}
</script>

</body>
</html>

Hope that helps!
Joe