CODEWITHSUNDEEP
javascriptjquery
Ash
Ash

Reputation: 415

How to remove selected items from dropdown list checkboxes

Im using this bootstrap dropdown list to select by using checkboxes, all fine just want to add in success after create new record to remove the selected items and keep them unselected.

             <select class="test" name="roles[]" id="roles" multiple>
              <option value="1">item1</option>
               <option value="2">item2</option>
              <option value="3">item3</option>       
             </select>

Jquery:

     $('#SubmitCreateForm').click(function(e) {    
        e.preventDefault();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: $('#archiveurl').attr('href'),
            method: 'post',
            data: $("#createform").serialize(),

            success: function(result) {
                     $('#roles').find('option').remove().end(); // I tried this but not work!      
                }
            }
        });
     });

Im using this plugin for this type of checkboxes in dropdownlist

https://github.com/mgibbs189/fSelect

enter image description here

Upvotes: 0

Views: 1079

Answers (3)

Pedram
Pedram

Reputation: 16575

Those are not really checkboxes ! but select option, so you can unselect like below:

window.fs_test = $('.test').fSelect();

//

$('#button').click(function() {
  $('#roles option').prop('selected', false)
  $('.fs-option').removeClass('selected')
});
select {
    position: absolute;
    right: 0;
    display: block!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://facetwp.com/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.js"></script>
<link rel="stylesheet" href="https://facetwp.com/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.css">
<select class="test" name="roles[]" id="roles" multiple>
  <option value="1" selected>item1</option>
  <option value="2" selected>item2</option>
  <option value="3" selected>item3</option>
</select>

<button id="button">Uncheck</button>

Updated:

As you mentioned which plugin you are using, After I checked, can say there is no native way to uncheck selected, it's not advanced plugin, kinda weak! it even not support attr data from native element, so I did the trick, remove selected class from list.

$('.fs-option').removeClass('selected')

Upvotes: 0

Pramod Singh
Pramod Singh

Reputation: 42

To get removed the selected option from a tag apply remove() function on the selected option: $("#roles").children('option:selected').remove();

$(document).ready(function(){
		$("#roles").on('change',function(){
    $(this).children('option:selected').remove();
  });
});
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<select class="test" name="roles[]" id="roles" multiple>
              <option value="1">item1</option>
               <option value="2">item2</option>
              <option value="3">item3</option>
             </select>
</body>

</html>

Upvotes: 0

TonyB
TonyB

Reputation: 31

Here:

success: function(result) {
   $('#roles').find('option').remove().end(); // I tried this but not work!      
}

You don't specify which "option" you want to delete. Try this:

$("#roles option[value='X']").remove();

Upvotes: 1

Related Questions