Bootstrap 多选 - 通过单击取消选择

Question

我正在使用 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>

Answer 1

这可以通过取消select所有然后获取 selected 值并从中删除目标标记并重新select 其余部分然后最终刷新来实现select :

$(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>

Answer 2

我认为你不应该在 div 元素中使用 value 属性，因为它不是为你正在尝试做的工作而设计的 (see here)。例如，您可以使用 data-tag="php"，并且在编写 html 时，我认为最好也使用 " 而不是 '，但浏览器可以做到这一点。在 select 元素中，您用 "caps lock" 中的第一个字母编写了 id 标签然后在您使用#tags 的 javascript 代码中，请参阅：

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

之后，您只需要从数组中删除 selected 元素并重新设置值，请参阅工作示例：

 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>

Bootstrap 多选 - 通过单击取消选择

Bootstrap Multiselect - unselect by onclick

javascript

jquery

select

multi-select

twitter-bootstrap