已连接的选择标记

Connected select tags

本文关键字：选择 连接      更新时间：2023-09-26

我在一个页面上有几个选择标签，按 3 分组。我希望每个组 3 共享相同的选项列表，如果用户在第一个框中选择"瑞典"，则"瑞典"将从第二个框的选项中删除。但这是棘手的部分，如果用户决定再次更改第一个框以说"英格兰"，那么"瑞典"将回到第二个选择框的列表中。听起来很模糊？我的代码设法从下一个框中删除一个国家/地区，但随后它被永久删除，而且更改现在仅影响最接近的选择标签。我想更改该组中所有 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

在你的

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

我希望它能帮助你。

相关文章：