从选择列表中删除已附加在 Jquery 中的项目答案

【问题标题】：Remove items from select list which have been appended in Jquery从选择列表中删除已附加在 Jquery 中的项目
【发布时间】：2015-01-09 07:35:48
【问题描述】：

我的表单允许用户选择一种车辆类型，然后使用 Jquery 将这些选中的值附加到我的选择列表中。

一切都好，除了我需要处理车辆的取消选择，这应该删除选择列表中的值。

您应该能够在追加时看到，我将其归为一个“select_option”类，我用它来尝试从选择中删除它。但是，它不起作用。

如何删除那些被取消选择的？

HTML

<form action="">
<input type="checkbox" name="vehicles" data-name="Bike" value="Bike">Bike
<input type="checkbox" name="vehicles" data-name="Car" value="Car">Car
</form>

<select name="choose_car" id="choose_car">
     <option value=""class="select_option">Choose car</option>
</select>

JQUERY

$('.vehicles').click(function(){

    $('#choose_car').append('<option value=' + $(this).val() + ' class=\'select_option\'>' + $(this).data("name")) + '</option>';

    $.each($(".vehicles:not(:checked"), function(){
        $('option.select_option').remove();
    });
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您需要使用未检查车辆的值，因此您只需删除这些选项：

$(".vehicles:not(:checked)").each(function() {
    var val = $(this).val();
    $('#choose_car option.select_option[value=' + val + ']').remove();
});

【讨论】：

【解决方案2】：

完整的工作示例（在同一函数中添加和删除）：

每次您选中或取消选中时，它都会从列表中添加或删除项目

你可以放弃 select_option 类

http://jsfiddle.net/dgp4bv3j/1/

$(function() {
    $("[type='checkbox']").on("change", function() {
        if($(this).is(":checked")) {
            $("#choose_vehicle").append("<option value=\"" + $(this).val() + "\">" + $(this).val() + "</option>");
        } else {
            $("#choose_vehicle option[value='" + $(this).val() + "']").remove();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
    <input type="checkbox" name="vehicles" data-name="Bike" value="Bike">Bike
    <input type="checkbox" name="vehicles" data-name="Car" value="Car">Car
</form>

<select name="choose_vehicle" id="choose_vehicle">
     <option value="">Choose vehicle</option>
</select>

【讨论】：

【解决方案3】：

这个呢？ http://jsfiddle.net/0hk8rLcj/

$('[name=vehicles]').click(function(){


    $('#choose_car').append('<option value=' + $(this).val() + ' class=\'select_option\'>' + $(this).data("name")) + '</option>';

    $("[name=vehicles]:not(:checked)").each(function() {
    var val = $(this).val();
    $('#choose_car option.select_option[value=' + val + ']').remove();
});
});

【讨论】：

【解决方案4】：

我完成了与其他人类似的答案：http://jsfiddle.net/h7w8x7sh/15/

$('.vehicles').click(function(){
var chooseCar = $('#choose_car');

if ($(this).prop('checked')) { 
    chooseCar.append('<option value=' + $(this).val() + ' class=\'select_option\'>' + $(this).data("name") + '</option>');
}
else {
    var ogValue = $(this).val();
    $('#choose_car option').each(function()  {
        var value = $(this).val();
        if (ogValue == value) {
            $(this).remove();
        }
    });
}
});

几乎做同样的事情，但我把它包括在内是因为我花了一些时间来写它。但是是的，除非它们是类，否则您应该更改 $('.vehicles') （我将它们更改为我的小提琴中的类）。

【讨论】：