Bootstrap-Multiselect：如何使用 JQuery 取消选中和取消选择 Multiselect 选项

Question

我想编写 JQuery 代码来取消选中和删除 select 来自 Bootstrap Multi select.

的一些选项

例如，如果 multi-select 具有以下值 selected & checked：

我想要一个 JQuery 将输出以下

我做了以下 JQuery 但没有用：

    $('#example-optionClass').val('1').prop('checked', flase);
    $('#example-optionClass').val('4').prop('checked', flase);
    $('#example-optionClass').val('2').prop('checked', true);
    $('#example-optionClass').val('6').prop('checked', true);

这里是源代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-optionClass').multiselect({
            includeSelectAllOption: true, // add select all option as usual
            optionClass: function(element) {
                var value = $(element).val();
 
                if (value%2 == 0) {
                    return 'odd'; // reversed
                }
                else {
                    return 'even'; // reversed
                }
            }
        });
    });
</script>
<style type="text/css">
    #example-optionClass-container .multiselect-container li.odd {
        background: #eeeeee;
    }
    #example-optionClass-container .multiselect-all {
       background: #eeeeee;
    }
</style>
</head>
<body>

<div class="container">
  <h2>Bootstrap Multiselect Test</h2>  
  <div id="example-optionClass-container">
    <select id="example-optionClass" multiple="multiple">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
</div>
</div>


</body>
</html>

请help.thanks

Answer 1

您可以使用 multiselect methods: select / deselect

片段：

$(document).ready(function() {
  $('#example-optionClass').multiselect({
    includeSelectAllOption: true, // add select all option as usual
    optionClass: function(element) {
      var value = $(element).val();

      if (value%2 == 0) {
        return 'odd'; // reversed
      }
      else {
        return 'even'; // reversed
      }
    }
  });

  $('#example-optionClass').multiselect('deselect', '1');
  $('#example-optionClass').multiselect('deselect', '4');
  $('#example-optionClass').multiselect('select', '2');
  $('#example-optionClass').multiselect('select', '6');
});

#example-optionClass-container .multiselect-container li.odd {
  background: #eeeeee;
}
#example-optionClass-container .multiselect-all {
  background: #eeeeee;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>


<div class="container">
    <h2>Bootstrap Multiselect Test</h2>
    <div id="example-optionClass-container">
        <select id="example-optionClass" multiple="multiple">
            <option value="1" checked>Option 1</option>
            <option value="2">Option 2</option>
            <option value="3" checked>Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
            <option value="6">Option 6</option>
        </select>
    </div>
</div>

Answer 2

在 MultiSelect 到 select 个选项中你需要使用

$('#example-optionClass').multiselect('select', ['2', '6']);

这是说 select 来自 example-optionClass 的选项“2”和“6”。

要取消select 选项，您需要使用

$('#example-optionClass').multiselect('deselect', ['1', '4']);

这表示未select example-optionClass

中的选项“1”和“4”

如果您转到 The Methods，您将看到所有可用的 JavaScript 方法，它更详细地解释了如何使用上述 2 个功能。

希望对您有所帮助

Bootstrap-Multiselect：如何使用 JQuery 取消选中和取消选择 Multiselect 选项

Bootstrap-Multiselect: How to uncheck and deselect Multiselect options using JQuery

jquery

twitter-bootstrap

bootstrap-multiselect