liste déroulante

Question

Comment sélectionner dans le menu déroulant, afin qu'il affiche les valeurs requises dans le menu déroulant suivant?

Answer 1

Ceci est un exemple utilisant Jquery et un objet JSON contenant des options pour la liste suivante. Les options pourraient être chargées via Ajax ou intégrées dans la page via le code côté serveur (PHP etc).

Espérons que cela aide.

<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>