Sélecteurs d'identifiants multiples

Question

J'ai un formulaire avec 2 listes déroulantes sur la même page utilisant les mêmes identifiants.

<select id="country"> 
    <option value="">Any</option> 
    <option value="ENGLAND">England</option> 
    <option value="IRELAND">Ireland</option> 
    <option value="SCOTLAND">Scotland</option> 
    <option value="WALES">Wales</option> 
</select> 

<select id="county"> 
    <option value="">Select a country first...</option> 
</select> 

<div style="clear:both">&nbsp;</div> 

<select id="country"> 
    <option value="">Any</option> 
    <option value="ENGLAND">England</option> 
    <option value="IRELAND">Ireland</option> 
    <option value="SCOTLAND">Scotland</option> 
    <option value="WALES">Wales</option> 
</select> 

<select id="county"> 
    <option value="">Select a country first...</option> 
</select> 

Vous ne savez pas comment modifier le code JavaScript afin que la liste déroulante du second comté fonctionne de la même manière que la première. Les javascript existants et comment il fonctionne peut voir ici:

http://jsfiddle.net/pfYEb/10/

Answer 1

Vous voudrez probablement utiliser class = "country" au lieu de id = "country" afin que votre sélecteur corresponde aux deux. (même chose pour votre id = "comté") Dans votre jsfiddle, vous devrez également distinguer quel comté changer dans votre événement de changement de pays. Un moyen facile de faire cela est d'utiliser l'index de l'élément en cours.

J'ai forké votre jsfiddle here.

HTML

<select class="country"> 
    <option value="">Any</option> 
    <option value="ENGLAND">England</option> 
    <option value="IRELAND">Ireland</option> 
    <option value="SCOTLAND">Scotland</option> 
    <option value="WALES">Wales</option> 
</select> 

<select class="county"> 
    <option value="">Select a country first...</option> 
</select> 

<div style="clear:both">&nbsp;</div> 

<select class="country"> 
    <option value="">Any</option> 
    <option value="ENGLAND">England</option> 
    <option value="IRELAND">Ireland</option> 
    <option value="SCOTLAND">Scotland</option> 
    <option value="WALES">Wales</option> 
</select> 

<select class="county"> 
    <option value="">Select a country first...</option> 
</select> 
​ 

pertinente Javascript:

$('.country').change(function() { 
    var country = $(this).val(), 
     county = $('.county').eq($(".country").index(this)); // This matches the county 

    // Empty county dropdown 
    county.empty(); 

    // Update dropdown with appropriate contents 
    if (country === '') { 
     county.append('<option value="">Select a country first...</option>'); 
    } else { 
     $.each(counties[country], function(i, v) { 
     county.append('<option value="' + i + '">' + v + '</option>'); 
     }); 
    } 
    }); 

Answer 2

Vous ne pouvez pas vraiment résoudre cette interrogation par id. Les ID d'élément doivent être uniques dans un document par spécification. Votre meilleur coup, utilisez classes à la place.