Question

我想编写JQuery代码，取消选中Bootstrap Multi select中的一些选项。

例如，如果多选中选择了以下值并且＆amp;检查：

我想要一个将输出以下内容的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>

请帮忙。谢谢

Answer 1

在MultiSelect中选择您需要使用的选项

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

这就是说从example-optionClass中选择选项'2'和'6'。

要取消选择您需要使用的选项

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

这就是说取消选择example-optionClass

中的选项'1'和'4'

如果你转到The Methods，你会看到所有可用的JavaScript方法，它解释了如何更详细地使用上述2个函数。

希望这有帮助

Answer 2

您可以使用multiselect methods：选择/取消选择

摘录：

＆＃13;

$(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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap-Multiselect：如何使用JQuery

2 个答案: