具有动态选项的多个 Select 标签

Question

我的网站有多个成对出现的 select 标签。

因此，当我在 select 标签 1 中选择一支球队时，我希望该球队的所有球员都出现在最近的 select 标签 (2) 球员中。我已经完成了所有玩家的获取，并且我已经准备好了结果。但是当我使用 javascript 更新 select 标签时，我遇到了一个问题，要么所有玩家标签更新为相同的值，要么 none 更新。所以！我的问题是我只想更新下一个 (.player) select 标签而不是每个 .player 标签?

这是一个 DEMO

<div>
    <i>1</i>
    <select class="country">
        <option selected="selected">Team</option>
        <option value="England">England</option>
        <option value="Italy">Italy</option> 
    </select> 
</div> 
<div>
    <i>2</i>
    <select class="player">
           <option selected="selected">Player</option>
    </select>
</div>
<div>
    <i>1</i>
    <select class="country">
        <option selected="selected">Team</option>
        <option value="England">England</option>
        <option value="Italy">Italy</option>
    </select>
</div>
<div>
    <i>2</i>
    <select class="player">
        <option selected="selected">Player</option>
    </select>
</div>

$(document).ready(function() {
    $(".country").change(function() {
        $(this).next(".player").html("<option value='test'>test</option>");
    });
});

Answer 1

问题是因为 .player 不是 .country 的兄弟姐妹。您需要找到最近的父 div，然后转到下一个 div 并在其中找到 .player。试试这个：

$(".country").change(function() {
    $(this).closest('div').next('div').find('.player').html("<option value='test'>test</option>");
});

Updated fiddle

具有动态选项的多个 Select 标签

Multiple Select tags with dynamic options

html

javascript

jquery

dom