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

Using onchange to delete other occurrences of the value in the select element

本文关键字：其他 onchange 删除 select 元素 使用      更新时间：2023-09-26

所以我做了几个尝试，我觉得我很接近，但找不到正确的ajax。选择元素是在点击按钮时动态生成的，它们有相同的选项，但是我想要发生的是，一旦你选择了一个选项，该选项的所有其他出现都从选择元素中删除，只留下你选择的那个。

这个只是从每个select元素中删除类'theClass'，包括你改变的那个。

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

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

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

感谢您的帮助

您可以使用。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();
}

您可以尝试向目标select添加一个临时类或自定义属性来实现您的目标。

<select class="theClass" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select class="theClass" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select class="theClass" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
$(function() {
    $("body").on("change", ".theClass", function() {
        $(this).addClass("selected");
        $(".theClass:not(.selected)>option[value=" + $(this).val() + "]").remove();
        $(this).removeClass("selected");
    });
});

这是一个JSFiddle

编辑:改变了onchange事件即使在动态创建的select s上也会被触发

相关文章：