在 JQuery 上执行刷新以刷新选择选择器答案

【问题标题】：Perform refresh on a JQuery to refresh select picker在 JQuery 上执行刷新以刷新选择选择器
【发布时间】：2018-10-10 16:53:35
【问题描述】：

我有下面的 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>

【问题讨论】：

为了帮助您，您确实需要为您的问题添加更多内容。您至少可以包含 HTML 的相关部分吗？
嗨，我刚刚更新了它。包括更多的代码细节以及 HTML 和 jquery
您的 html 中的按钮在哪里？你到底想做什么？取消选择选定的选项？
嗨，我也加入了按钮。是的，完全取消选择选择选项
您是否尝试将选择值重置为默认值？

标签： javascript jquery html bootstrap-4

【解决方案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/

【讨论】：