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();
});
});
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();
});
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>
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();
});
});
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.