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来实现：

$(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元素中，您将id标签的首字母写在“大写锁定”中然后在您使用#tags的javascript代码中，请参阅：

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

Bootstrap Multiselect-通过onclick

2 个答案: