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

【问题标题】：Overwriting default selection in Selectize dropdown list覆盖选择下拉列表中的默认选择
【发布时间】：2016-07-19 17:12:50
【问题描述】：

我最近修改了一个网页，用Selectize Single Item Select 替换了非用户友好的搜索控件。

但我有一点 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>

【问题讨论】：

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

标签： jquery html selectize.js

【解决方案1】：

我是在旅途中完成的，它肯定需要改进，但至少它可以按预期工作。

编辑您的 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。

这是不言自明的，无论如何它会在下拉菜单出现时检查选择的值，然后在它消失时再次检查，并且只有在选择的值是默认值时才执行逻辑。

【讨论】：

出于某种原因，that.html('') 禁用了搜索功能。但是将这两行更改为使用this.clear 和this.setValue 让它再次工作。感谢您为我指明正确的方向！

【解决方案2】：

就在最近，我使用了 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...">。只要没有选定的选项，就会显示该占位符文本。

希望这对遇到类似问题的人有所帮助。

【讨论】：