Question

我有以下HTML代码，可以选择带有实时选项的多个选项。我是jquery的新手，如果选择了多个选项，我会编写代码来刷新

    <div class="col-sm">
        <select id="dataPicker" class="selectpicker show-menu-arrow rule-options" multiple title="Rule Description" data-live-search="true" data-width="140px" data-size="5">
            <option data-tokens="A"> A thru Column G </option>
            <option data-tokens="B">B toC</option>
            <option data-tokens="G">G to A</option>
       </select>
    </div>

<div class="container">
            <div class = "row">

                <div class="ml-auto p-1">
                  <button class="btn btn-dark " type="Validate">Run Validation</button>
                  <button class="btn btn-dark" id="myButton" type="Clear" >Clear Validation</button>
                </div>

            </div>
        </div>

    <script>
        $('#myButton').on('click', function() {
            $("#dataPicker").selectpicker("refresh");
        })
    </script>

Answer 1

一个简单且可行的解决方案是：

$('#myButton').on('click', function() {
  $('#dataPicker').find('option').prop("selected", false);
})

您可以在JSFiddle上对其进行测试：
http://jsfiddle.net/8e5agdpq/

我还阅读到jQuery版本之间存在许多兼容性问题。在我所有的测试中都可以使用的残酷，非优雅，通用的解决方案还包括：

$('#myButton').on('click', function() {
    $('#dataPicker')
        .find('option')
        .remove()
        .end()
        .append('<option data-tokens="A"> A thru Column G </option>')
        .append('<option data-tokens="B">B toC</option>')
        .append('<option data-tokens="G">G to A</option>')
    ;
})

您可以在JSFiddle中对其进行测试：
http://jsfiddle.net/koxs785a/

对JQuery执行刷新以刷新选择器

1 个答案: