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

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/