javascript - 使用 onchange 删除 select 元素中其他出现的值

Question

所以我做了几次尝试，我觉得我已经很接近了，但找不到正确的ajax。选择元素是通过单击按钮动态创建的，并且它们具有相同的选项，但是我想要发生的是，一旦您选择一个选项，该选项的所有其他出现都会从选择元素中删除，留下您选择的元素独自一人。

这只是从具有类“theClass”的每个选择元素中删除，包括您更改的元素。

function removeOptions(optionValue) {
    $('.theClass option[value='+optionValue+']').remove();
}

我最初尝试使用 .each() 函数，但无法正确调用“this”。

function removeOptions(optionValue) {
    $( ".theClass").each( function () {
        $(this + 'option[value='+optionValue+']').remove();
    }
}

感谢任何帮助

Answer 1

您可以使用.not()过滤您想要保留的内容，如下所示。

$(document).on("change", "select", function() {

    var val = $(this).val();
    $(this).find("option[value='" + val + "']:not(:selected)").remove();    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="3">3</option>
    <option value="2">2</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

编辑:根据您的评论，以下内容可行。

$(document).on("change", "select", removeOptions);

function removeOptions() {
    var val = $(this).val();
    $("select").not(this).find("option[value='" + val + "']").remove();
}

拿一个look at this demo一个工作示例。