Wrox Programmer Forums
|
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old September 9th, 2005, 02:13 AM
Authorized User
 
Join Date: Aug 2005
Posts: 64
Thanks: 0
Thanked 0 Times in 0 Posts
Default changing drop down menu

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

 
Old September 10th, 2005, 04:21 AM
Friend of Wrox
 
Join Date: May 2004
Posts: 212
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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





Similar Threads
Thread Thread Starter Forum Replies Last Post
Drop down menu mizlatic BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 4 February 11th, 2008 07:02 AM
changing drop down menu value dynamically elladi Javascript How-To 3 October 30th, 2007 12:01 PM
Drop down menu antoneath Beginning PHP 1 January 27th, 2006 08:45 AM
right click menu hidden by drop-drown menu Andraw HTML Code Clinic 0 March 18th, 2005 03:28 PM
Changing Menu made with VB 4 Menu Editor Zooker VB How-To 1 July 26th, 2003 11:44 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.