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

Question

My form allows users to select a vehicle type, which then, using Jquery, appends those values which are checked, to my select list.

All good, except I need to handle the de-selection of vehicles, which should remove the value in the select list.

You should be able to see that on append, I attribute a class of "select_option" which is what I use to try and remove this from the select. However, it isn't working.

How can I remove those that are de-selected?

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

You need to use the values of the non-checked vehicles so you only remove those options:

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

Answer 2

Complete working example (add and remove in the same function) :

each time you check or uncheck, it adds or remove the item from the list

you can drop the select_option class

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

What about this? 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

I completed a similar answer to the others: 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();
        }
    });
}
});

does the same thing pretty much but I am including it because I spent some time writing it up. But yeah you should change the $('.vehicles') unless they are classes (I changed them to classes in my fiddle).