Question

我在一个页面上有几个选择标签，分组为3乘3。我希望每个小组3分享相同的选项列表，如果用户选择＆＃34;瑞典＆＃34;在第一个框中，然后＆＃34;瑞典＆＃34;从第二个框的选项中删除。但是这里有一个棘手的部分，如果用户决定再次改变第一个方框，那么就说＆＃34;英格兰＆＃34;然后＆＃34;瑞典＆＃34;将返回第二个选择框的列表。听起来很模糊？我的代码设法从下一个框中删除一个国家，但随后将其删除，同时更改仅影响最近的选择标记。我想更改该组中所有4个选择标记的内容。这是我的代码，请指出我正确的方向：

<div id="group1">
    <div>
        <select>
            <option value="France">France</option>
            <option value="Sweden">Sweden</option>
            <option value="England">England</option>
            <option value="Germany">Germany</option>
            <option value="USA">USA</option>
        </select>
    </div>
    <div>
        <select>
            <option value="France">France</option>
            <option value="Sweden">Sweden</option>
            <option value="England">England</option>
            <option value="Germany">Germany</option>
            <option value="USA">USA</option>
        </select>
    </div>
    <div>
        <select>
            <option value="France">France</option>
            <option value="Sweden">Sweden</option>
            <option value="England">England</option>
            <option value="Germany">Germany</option>
            <option value="USA">USA</option>
        </select>
    </div>
</div>
<div id="group2">
    <div>
        <select>
            <option value="France">France</option>
            <option value="Sweden">Sweden</option>
            <option value="England">England</option>
            <option value="Germany">Germany</option>
            <option value="USA">USA</option>
        </select>
    </div>
    <div>
        <select>
            <option value="France">France</option>
            <option value="Sweden">Sweden</option>
            <option value="England">England</option>
            <option value="Germany">Germany</option>
            <option value="USA">USA</option>
        </select>
    </div>
    <div>
        <select>
            <option value="France">France</option>
            <option value="Sweden">Sweden</option>
            <option value="England">England</option>
            <option value="Germany">Germany</option>
            <option value="USA">USA</option>
        </select>
    </div>
</div>


$("select").change(function(){
    var value = $(this).val();
    $(this).closest('div').next('div').find("option").removeClass('hide');
   $(this).closest('div').next('div').find("option[value='"+value+"']").addClass('hide');
});

更新： JSFiddle

Answer 1

在你的css中添加一个类

.hide{display:none;}

之后更新您的脚本函数

$(this).closest('div').next('div').find("option").removeClass('hide');
       $(this).closest('div').next('div').find("option[value='"+value+"']").addClass('hide');

在您的代码中，使用.remove()从DOM中删除元素如果您再次需要该元素，则将该元素保存在DOM中。

我希望它会对你有所帮助。

已连接的选择标记

1 个答案: