Question

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

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

你应该能够看到在追加时，我将一类＆＃34; select_option＆＃34;这是我用来尝试从选择中删除它。但是，它不起作用。

如何删除取消选择的内容？

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();
    });
});

Answer 1

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

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

Answer 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>

Answer 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();
});
});

Answer 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();
        }
    });
}
});

做了同样的事情，但我包括它因为我花了一些时间来写它。但是，你应该改变$（'。辆车'），除非他们是班级（我把他们改成了我的小提琴课）。

从选择列表中删除已添加到Jquery中的项目

4 个答案: