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

$(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>
1
Chrissy Mint 26 Сен 2018 в 11:23

2 ответа

Лучший ответ

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

$(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>
1
Sudharshan Nair 26 Сен 2018 в 13:44

Я думаю, что вам не следует использовать атрибут 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>
1
Wolgan Ens 26 Сен 2018 в 14:13