覆盖Selectize下拉列表中的默认选择

我最近修改了一个网页，用Selectize单项选择替换非用户友好的搜索控件。覆盖Selectize下拉列表中的默认选择

但我有一个小UI的烦恼。当你点击控件然后尝试输入新的选择时，什么都不会发生;它仍然有默认选项。您首先必须按Backspace键删除默认选择，然后然后您可以输入新的搜索。

如何在不需要按Backspace的情况下立即覆盖默认选项进行打字？

以下是一个演示这一问题的简短的HTML例子：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Selectize Example</title> 
     <link rel="stylesheet" href="Selectize/css/selectize.css"> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
     <script type="text/javascript" src="Selectize/js/standalone/selectize.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <select name="Manufacturer" id="Manufacturer" class="selectize"> 
      <option value="ALL" selected>All Manufacturers</option> 
      <option value="1">Acme Corp.</option> 
      <option value="2">Contoso Ltd.</option> 
      <option value="3">Electronic, Inc.</option> 
     </select> 
     <script type="text/javascript"> 
     $(".selectize").selectize({create: false}) 
     </script> 
    </body> 
</html>

来源

2016-02-12 dan04

我在jsfiddle上玩这个，似乎唯一（最简单和最快）的方法是清空焦点上的输入，并将其设置回缺省值，如果没有选择/输入。仍然是一个便宜的解决方案，无论如何... – phaberest

我这样做是在旅途中，它肯定需要改进，但至少它按预期工作。

编辑你的JavaScript如下：

$(".selectize").selectize({ 
    create: false, 
    onDropdownOpen: function(dropdown) { 
     var that = $(dropdown).prev().find('.item'); 

     // If the default option is selected, we empty the div acting as input. 
     if(that.data('value') == 'ALL') { 
      that.html(''); 
     } 
    }, 
    onDropdownClose: function(dropdown) { 
     var that = $(dropdown).prev().find('.item'); 

     // If nothing was selected, we restore initial value 
     if(that.data('value') == 'ALL') { 
      that.html('All Manifacturers'); 
     } 
    }, 
});

我做了一个小的jsfiddle也check it。

这是相当自我解释，无论如何它检查下拉列表显示时选择的值，然后再次消失时，只有选定的值是默认值时才执行逻辑。

来源

2016-02-12 21:18:35 phaberest

出于某种原因，'that.html（''）'禁用搜索功能。但改变这两行以使用'this.clear'和'this.setValue'让它再次运行。感谢您指点我正确的方向！ – dan04

很高兴你解决了;） – phaberest

就在最近，我使用了selectize.js v0.12.2（使用Django表单和初始选择选项从该表单中设置）并且有一个非常类似的问题：选择框始终使第一个选项成为其默认选定选项并始终在初始化时显示默认选择的一个。然后，单个项目选择并不重要，因为当我们选择另一个选项时，默认选项将消失，但对于多项选择，这是一个烦恼，我们必须点击退格删除默认选择的选项。

我已经找到了解决办法：在脚本中设置items:null：

$(".selectize").selectize({ 
 
    create: false, 
 
    maxItems: 3, 
 
    plugins: ['remove_button'], 
 
    items: null, 
 
    delimiter: ',', 
 
    persist: false, 
 
});

顺便说一句，你可以设置selectize占位符，例如在HTML文件中直接设置它：<select name="Manufacturer" id="Manufacturer" class="selectize" placeholder="Select a manufacturer...">。只要没有选择的选项，该占位符文本将被显示。

希望这有助于任何有类似问题的人。

来源

2016-07-19 09:12:50

覆盖Selectize下拉列表中的默认选择

回答

相关问题