具有动态选项的多选标签

Question

我有一个包含多个成对选择标签的网站。

所以当我在选择标签 1 中选择一个球队时，我希望该球队的所有球员都出现在最近的选择标签 (2) 球员中。我已经完成了所有的玩家获取，我已经准备好了我的结果。但是，当我使用 javascript 更新选择标签时，我遇到了一个问题，要么所有播放器标签都更新为相同的值，要么没有更新。 所以！我的问题是我只想更新下一个 (.player) 选择标签而不是每个 .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