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

回答

相关问题