Как удалить выбранные элементы из выпадающего списка флажки - PullRequest
Новая
       1

Как удалить выбранные элементы из выпадающего списка флажки

0 голосов
/ 08 февраля 2020

Я использую этот bootstrap выпадающий список, чтобы выбрать с помощью флажков, все хорошо, просто хочу добавить в успех после создания новой записи, чтобы удалить выбранные элементы и оставить их невыбранными. 

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

Я использую этот плагин для этого типа флажков в выпадающем списке

https://github.com/mgibbs189/fSelect

enter image description here

Ответы [ 3 ]

1 голос
/ 08 февраля 2020

Здесь: 

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

Вы не указываете, какую «опцию» вы хотите удалить. Попробуйте это: 

$("#roles option[value='X']").remove();
0 голосов
/ 08 февраля 2020

Чтобы удалить выбранный параметр из тега, примените функцию remove () к выбранному параметру: $ ("# role"). 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>
0 голосов
/ 08 февраля 2020

Это не действительно флажки ! , но select option, поэтому вы можете отменить выбор, как показано ниже: 

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>

Обновлено:

Как вы упомянули, какой плагин вы используете, После того как я проверил, могу сказать нет родного способа снять выделение, это не продвинутый плагин, вроде слабый! он даже не поддерживает attr данные из нативного элемента, поэтому я решил, убрав класс selected из списка. 

$('.fs-option').removeClass('selected')
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...