小贝子编程

当没有文本时隐藏下拉值



如果搜索中没有文本，我想要隐藏下拉值。下面的代码就像一个魅力的单一选择。当允许多个值选择时，它会在用户第一次选择后自动显示所有下拉值。

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.js"></script>
<select multiple class="form-control select-key" id="sel2" name="key-list[]">
<option>SBI Cap</option>
<option>PGIM MidCap</option>
<option>Axis SmallCap</option>
<option>Kotak Technology</option>
<option>SBI Technology</option>
</select>

JS

$(function () {
$("#sel2").selectize({
onDropdownOpen: function($dropdown) {if (!this.lastQuery.length) {this.close(); this.settings.openOnFocus = false;}},   
onType : function (str) {if (str === "") {this.close();}}
});
});

添加项后下拉菜单保持打开状态。只需在用户添加条目后关闭它。

$(function () {
$("#sel2").selectize({
onDropdownOpen: function($dropdown) {
if (!this.lastQuery.length) {
this.close(); 
this.settings.openOnFocus = false;
}
},   
onItemAdd: function() {
this.close();
},
onType : function (str) {
if (str === "") {
this.close();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.js"></script>
<select multiple class="form-control select-key" id="sel2" name="key-list[]">
<option>SBI Cap</option>
<option>PGIM MidCap</option>
<option>Axis SmallCap</option>
<option>Kotak Technology</option>
<option>SBI Technology</option>
</select>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium