时间戳

首页 > 解决方案 > 如何将 tail.select 列表重置为默认值？

javascript - 如何将 tail.select 列表重置为默认值？

问题描述

如何使用 JS 或 JQuery 从 tail.select （链接到https://github.com/pytesNET/tail.select）重置选择值，我尝试从选择中更改值，但没有帮助。

       <select class="form-control searchSelect">
            <option value="" selected disabled>&nbsp;</option>
            <option value="1">V1</option>
            <option value="2">V2</option>
            <option value="3">V3</option>
        </select>
        
        <button type="button" class="resetList">Reset List</button>
<script>
  let tselect = tail.select('.searchSelect', {
                        search:true,
                        deselect:true,
                        hideSelected:true,
                        hideDisabled:true
                    });
    
 $(document).on('click', '.resetList', function(){ 
    $('.searchSelect ').val();
    $(".searchSelect option:selected").removeAttr("selected"); 
    $('.searchSelect').val(null).trigger('change');
 });

</script>

我试过直到

$('.searchSelect ').val();

$(".searchSelect option:selected").removeAttr("selected");

$('.searchSelect').val(null).trigger('change');

我阅读了文档，但我无法弄清楚。

标签： javascriptjquerytail.select

解决方案

您可以使用对象的reload()方法tail.select()：

let tselect = tail.select('.searchSelect', {
            search:true,
            deselect:true,
            hideSelected:true,
            hideDisabled:true
        });

document.querySelector("button").addEventListener("click", () => tselect.reload());
<script src="https://cdn.jsdelivr.net/npm/tail.select@latest"></script>

<select class="form-control searchSelect">
    <option value="" selected disabled>&nbsp;</option>
    <option value="1">V1</option>
    <option value="2">V2</option>
    <option value="3">V3</option>
</select>

<button type="button" class="resetList">Reset List</button>

如果您不想清除过滤器输入中的文本，则可以使用query()不带参数的方法：

let tselect = tail.select('.searchSelect', {
            search:true,
            deselect:true,
            hideSelected:true,
            hideDisabled:true
        });

document.querySelector("button").addEventListener("click", () => tselect.query());
<script src="https://cdn.jsdelivr.net/npm/tail.select@latest"></script>

<select class="form-control searchSelect">
    <option value="" selected disabled>&nbsp;</option>
    <option value="1">V1</option>
    <option value="2">V2</option>
    <option value="3">V3</option>
</select>

<button type="button" class="resetList">Reset List</button>

推荐阅读