drop down selection

How to s开发者_JAVA技巧elect from drop down menu,so that it will display required values in the next drop down menu?

This is an example using Jquery and a JSON Object containing options for the next list. The options could be loaded via Ajax or embedded into the page via server side code(PHP etc).

Hope this helps.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">

// Options JSON object can be created by server side or loaded via Ajax
var nextOptions = {options1: {"1": {name: "secondOptions1-1", value:"1"}, "2": {name: "secondOptions1-2", value:"2"}}, options2: {"1": {name: "secondOptions2-1", value:"1"}, "2": {name: "secondOptions2-2", value:"2"}}, options3: {"1": {name: "secondOptions3-1", value:"1"}, "2": {name: "secondOptions3-1", value:"2"}}};


$(document).ready(function(){

// Add event Listener
$('#list1').change(function(){

            // Clear the Second List
            $('#list2').empty();
            // Create an Empty Option
            $('#list2').append('<option></option>');
            // Get Value from first list 
            var value = $('#list1 option:selected').val();

                // Cycle through options for second list, and add them.
                $.each(nextOptions["options" + value], function(index, optionsIndex){
        $('#list2').append('<option value="' + optionsIndex["value"] + '">' + optionsIndex["name"] + '</option>');
                            }); // For Each Loop

                            }); // Event Listener
}); // Document Ready
</script>

<select id="list1">
<option></option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
<br /><br />
<select id="list2">
<option></option>
</select>