Ich verwende diese Bootstrap-Dropdown-Liste, um mithilfe von Kontrollkästchen auszuwählen. Alle in Ordnung möchten nur nach dem Erstellen eines neuen Datensatzes erfolgreich hinzufügen, um die ausgewählten Elemente zu entfernen und sie nicht auszuwählen.

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

Ich benutze dieses Plugin für diese Art von Kontrollkästchen in der Dropdown-Liste

https://github.com/mgibbs189/fSelect

enter image description here

0
Ash 8 Feb. 2020 im 11:59

3 Antworten

Beste Antwort

Dies sind nicht wirklich Kontrollkästchen ! , sondern select option, sodass Sie die Auswahl wie folgt aufheben können:

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>

Aktualisiert:

Wie Sie bereits erwähnt haben, welches Plugin Sie verwenden, kann ich nach dem Überprüfen sagen, dass es keine native Möglichkeit gibt, das ausgewählte Plugin zu deaktivieren. Es ist kein erweitertes Plugin, irgendwie schwach! Es unterstützt sogar keine attr Daten von nativen Elementen, also habe ich den Trick gemacht, die selected Klasse aus der Liste zu entfernen.

$('.fs-option').removeClass('selected')
0
Pedram 8 Feb. 2020 im 10:55

Um die ausgewählte Option aus einem Tag zu entfernen, wenden Sie die Funktion remove () auf die ausgewählte Option an: $ ("# 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
Pramod Singh 8 Feb. 2020 im 10:02

Hier:

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

Sie geben nicht an, welche "Option" Sie löschen möchten. Versuche dies:

$("#roles option[value='X']").remove();
1
TonyB 8 Feb. 2020 im 09:44