Overwriting default selection in Selectize dropdown list

时间:2016-02-12 20:33:40

标签: jquery html selectize.js

I recently modified a webpage to replace a non-user-friendly search control with a Selectize Single Item Select.

But I'm having one little UI annoyance. When you click on the control and then try typing in a new selection, nothing happens; it still has the default option. You first have to press Backspace to delete the default selection, and then you can enter a new search.

How can I make typing immediately overwrite the default option, without having to press Backspace?

Here's a short HTML example that demonstrates the issue:

unsigned int dec2bcd(unsigned int num) // say num is now 100
{
    unsigned int ones = 0;
    unsigned int tens = 0;
    unsigned int temp = 0;

    ones = num%10; // 100%10 = 0
    temp = num/10; // 100/10 = 10, or 0x0A
    tens = temp<<4;  
    return (tens + ones);// so the result is A0
}

2 个答案:

答案 0 :(得分:1)

I did it on the go, it surely needs improvements, but at least it works as expected.

Edit your javascript as follows:

videoId

I made a little jsfiddle too, check it.

It is quite self explanating, anyway it checks the value selected when the dropdown shows up, then again when it disappear and do the logic only if the selected value is the default.

答案 1 :(得分:1)

就在最近,我使用了selectize.js v0.12.2(Django表单和初始选择选项是从该表单设置的)并且有一个类似的问题:选择框总是使第一个选项成为默认选择选项并始终显示初始化时默认选择一个。然后,使用单个项目选择,它并不重要,因为当我们选择另一个选项时,默认选项将消失,但是对于多项目选择,我们必须按空格键以删除默认选择的选项是一个烦恼。

我找到了解决方案:在脚本中设置items:null

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

顺便说一句,您可以设置选择占位符,例如直接在html文件中设置:<select name="Manufacturer" id="Manufacturer" class="selectize" placeholder="Select a manufacturer...">。只要没有选定的选项,就会显示该占位符文本。

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