多個ID選擇器

我有一個在同一頁上使用相同ID的2個下拉列表的表單。多個ID選擇器

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

不確定如何更改JavaScript代碼，以便第二個縣的下拉列表功能與第一個相同。已有的JavaScript和它的功能如何可以在這裏看到：

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

來源

2012-12-02 user1400854

ID必須在頁面上獨一無二的。使用類而不是ID。「使用相同ID的 –

」。停在那裏。回去。糾正它。同一個文檔中不能同時具有多個具有相同ID的元素。 –

您可能想要使用class =「country」而不是id =「country」，以便您的選擇器將兩者匹配。（您的id =「縣」相同）在您的jsfiddle中，您還需要區分在您的國家/地區更改事件中要更改哪個縣。一個簡單的方法是使用當前元素的索引。

我已經分叉你的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>

相關的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>'); 
     }); 
    } 
    });

來源

2012-12-02 00:16:43

偉大的dbaseman，做了詭計。非常感謝。 – user1400854

你真的無法通過ID解決這個查詢。順便說明，元素ID在文檔中必須是唯一的。您最好的拍攝，請使用classes。

來源

2012-12-02 00:16:31 jAndy

回答

相關問題