remplir une liste déroulante de sélection sur la base d'une autre liste déroulante de sélection

Question

Comment remplir une liste déroulante de sélection dont les valeurs dépendent de ce qui est sélectionné dans la liste déroulante parente. E-g, Première liste déroulante contient des noms de pays, et lors de la sélection, la liste déroulante suivante chargera les états correspondants de ce pays, sélectionnés dans la première liste déroulante. Et puis disons que j'ai une troisième liste déroulante, où je mets l'image de cet état particulier, qui correspond à ce qui est sélectionné dans la deuxième liste déroulante.

Comment cela peut-il être fait dans JQuery.

Par exemple,

Pays >>>>> États >>>>>> Carte de cet Etat

Answer 1

Regardez ce plugin: cascade Vous pouvez avoir quelques classes CSS pour chaque État, les drapeau que vous voulez afficher avec l'image d'arrière-plan approprié et classe swith sur deuxième événement de changement de menu déroulant:

var statesList = [ 
    { 
    'When': 'US', 
    'Value': 'nope', 
    'Text': 'Select state'}, 
{ 
    'When': 'US', 
    'Value': 'US_AL', 
    'Text': 'Alabama'}, 

{ 
    'When': 'US', 
    'Value': 'US_AK', 
    'Text': 'Alaska'}, 
{ 
    'When': 'IN', 
    'Value': 'nope', 
    'Text': 'Select state'}, 
{ 
    'When': 'IN', 
    'Value': 'IN_AP', 
    'Text': 'Andra Pradesh'}, 

{ 
    'When': 'IN', 
    'Value': 'IN_AS', 
    'Text': 'Assam'} 
]; 

$("#state").cascade("#country", { 
    list: statesList, 
    template: function(item) { 
     return "<option value='" + item.Value + "'>" + item.Text + "</option>"; 
    }, 
    match: function(selectedValue) { 
     return this.When == selectedValue; 
    } 
}); 

$("#state").change(function() { 
    $("#flag").removeClass().addClass($(this).val()); 
}); 

<label>Country 
    <select id="country"> 
     <option value="nope">Choose a country</option> 
     <option value="US">United States</option> 
     <option value="IN">India</option> 
    </select> 
</label> 

<label>State 
    <select id="state"> 
     <option value='nope'>Select a country before</option> 
    </select> 
</label> 

<span id="flag" style="border: 1px solid #000; padding: 1px;"> 
</span> 

Answer 2

Il y a un plugin pour le faire

http://code.google.com/p/jqueryselectcombo/

Ou vous pouvez voir la réponse de

How can I populate another dropdown with the onChange event of the first dropdown?

Answer 3

Pour le premier événement déroulant "onChange", vous devez appeler une fonction ajax qui renverra le deuxième tableau d'éléments déroulants (... ou quelque chose). Et lorsque l'appel ajax est terminé, il suffit d'ajouter les éléments de résultat.

Pseudo:

$select1.change(function(){ 
    caountry_id = select1.find(':selected').val(); 
    $.get(// ajax call 
    'path/to/script', // php script, this will return the states 
    {country: country_id}, 
    function(data){ // callback function 
     $.each(data, function(key, value){ // iterate trough the items 
      $select2.  // append nem options 
       append($("<option></option>"). 
       attr("value",key). 
       text(value)); 
     }); 
    }, 
    'json' 
}); 

Amusez-vous! :)

(Désolé pour mon anglais: ">)