Bootstrap Multiselect - отменить выбор по клику - PullRequest
Новая
       33

Bootstrap Multiselect - отменить выбор по клику

0 голосов
/ 26 сентября 2018

Я использую функцию Bootstrap-Multiselect ;Я хочу отменить выбор, когда я нажимаю «х».Это простой пример того, что я ищу.

$(document).on("click", '#remove', function(a) {
  var tag = this.getAttribute("value");

  $('#tags').find('[value=' + tag + ']').prop('selected', false);
});
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>

<body>
  <div class="container">
    <h1>Bootstrap Select demo</h1>
    <select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
      <option value='Php' selected>PHP</option>
      <option>CSS</option>
      <option>HTML</option>
      <option>CSS 3</option>
      <option>Bootstrap</option>
      <option>JavaScript</option>
    </select>

    <div value='Php' id='remove'>x</div>
  </div>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Я думаю, что вам не следует использовать атрибут value в элементе div, поскольку он не был предназначен для работы, которую вы пытаетесь выполнить ( см. Здесь ).Вы можете использовать data-tag = "php", например, и при написании html я думаю, что лучше использовать "вместо", но браузер делает свое дело. В элементе select вы написали теги id с первымбуква в «caps lock», а затем в коде JavaScript, который вы используете #tags, см .: 

<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
$('#tags').find('[value=' + tag + ']').prop('selected', false);

После этого вам просто нужно удалить выбранный элемент из массива и снова установить значения, см.рабочий пример: 

 jQuery(document).ready(function($) {
   $(document).on("click", '#remove', function(a) {
      var removed = $(this).data('value')
      var values = $("#tags").val()
      var index = values.indexOf(removed)
      if (index != -1) {
        values.splice(index, 1)
        $('#tags').selectpicker('val', values);
      } 
    });
  });
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>

<body>
  <div class="container">
    <h1>Bootstrap Select demo</h1>
    <select class="selectpicker" id="tags" data-style="btn-primary" multiple data-max-options="2">
      <option value="Php" selected>PHP</option>
      <option>CSS</option>
      <option>HTML</option>
      <option>CSS 3</option>
      <option>Bootstrap</option>
      <option>JavaScript</option>
    </select>

    <div data-value="Php" id="remove">x</div>
  </div>
</body>

</html>
0 голосов
/ 26 сентября 2018

Это может быть достигнуто путем отмены выбора всех, затем получения выбранных значений, удаления целевого тега из них и повторного выбора остальных, а затем, наконец, обновления выбора: 

$(document).on("click", '#remove', function(a) {
  var tag = this.getAttribute("value");
  var values = $('#tags').val();
  
  if(values){
  $('#tags').selectpicker('deselectAll');
  $('#tags').selectpicker('val', values.filter(function(e) {return e !== tag }));
  $('#tags').selectpicker('refresh');
  }
});
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>

<body>
  <div class="container">
    <h1>Bootstrap Select demo</h1>
    <select class="selectpicker" id='tags' data-style="btn-primary" multiple data-max-options="2">
      <option value='Php' selected>PHP</option>
      <option>CSS</option>
      <option>HTML</option>
      <option>CSS 3</option>
      <option>Bootstrap</option>
      <option>JavaScript</option>
    </select>

    <div value='Php' id='remove'>x</div>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...