代码之家 › 专栏 › 技术社区 › Ujjawal Bhandari

没有文本时隐藏下拉列表值

selectize.js jquery javascript

0

Ujjawal Bhandari · 技术社区 · 5 年前

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

HTML

<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();}}
   });
});

1 回复 | 直到 5 年前

1

teynon 5 年前

添加项目后,下拉列表将保持打开状态。在用户添加一个条目后关闭它。

$(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>