Question

我想从选择框中动态删除选项..

<select name="goal1">
   <option value="1">Fat Loss</option>
   <option value="2">Competition Prep</option>
   <option value="3">Marathon Training</option>
   <option value="4">Lean Mass</option>
   <option value="5">Triathlon Training</option>
   <option value="6">HIIT Training</option>
   <option value="7">LISS Training</option>
</select>

<select name="goal2">
       <option value="1">Fat Loss</option>
       <option value="2">Competition Prep</option>
       <option value="3">Marathon Training</option>
       <option value="4">Lean Mass</option>
       <option value="5">Triathlon Training</option>
       <option value="6">HIIT Training</option>
       <option value="7">LISS Training</option>
    </select>

<select name="goal3">
       <option value="1">Fat Loss</option>
       <option value="2">Competition Prep</option>
       <option value="3">Marathon Training</option>
       <option value="4">Lean Mass</option>
       <option value="5">Triathlon Training</option>
       <option value="6">HIIT Training</option>
       <option value="7">LISS Training</option>
    </select>

正如您所看到的，页面上有三个具有完全相同选项的选择框，是否有任何方法可以根据其他选择框的选择动态删除其他选择框的选项。

例如，如果在三个选择框的第一个中，我选择“减肥”，有没有办法从其他2个选择框中删除该选项以避免输入中的重复？

然后，如果选项未被选中，则该选项需要重新出现在其他选择框中。

Answer 1

是的。检查此JSFiddle。在三个下拉框之一中选择项目时，将从其他两个选项中删除选项。

$(document).ready(function () {
    $("select").on("change", function () {
        // Show all options
        $("option").show();

        // Get an array of all current selections
        var selected = [];
        $("select").each(function () {
            selected.push($(this).val());
        });

        // Remove all selected options, except the current showing one, from all lists
        $("select").each(function () {
            for (var i = 0; i < selected.length; i++) {
                if (selected[i] != $(this).val()) {
                    $(this).find("option[value='" + selected[i] + "']").hide();
                }
            }
        });
    });
});

编辑：我用新版本更新了小提琴，让选项在其他列表中取消选中时重新出现。不确定这是不是最好的方式...

从选择框中动态删除选项

1 个答案: