带有输入新值选项的淘汰赛 js 下拉列表

【问题标题】：knockout js dropdown list with an option to enter new value带有输入新值选项的淘汰赛 js 下拉列表
【发布时间】：2014-05-20 03:12:36
【问题描述】：

我想实现一个下拉列表，使用敲除 js 添加新项目选项。也就是说，用户可以从下拉列表中选择一个选项，然后他可以从同一个下拉列表中输入新值。任何人都可以知道如何使用淘汰赛 js 来实现这一点？

<select>
    <option>Enter new option</option>
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
    <option>Item4</option>
</select>

如上面的下拉列表所示，当用户从下拉列表中选择输入新选项时，他可以输入文本。

谢谢，

普拉文。

【问题讨论】：

标签： jquery knockout.js knockout-2.0

【解决方案1】：

在 HTML 中仅使用 select 是不可能实现“组合框”的。你必须做一个解决方法来实现这个。这样的事情可能是一个开始：

HTML：

<select id="dropdown" data-bind="options: dropDownItems, value: dropDownValue">
</select>
<input id="textbox" type="text" data-bind="visible: textBoxVisible" />
<button data-bind="click: showTextBoxValue">Show Current Value</button>

JavaScript：

function Demo(){
   var self = this;
   self.dropDownItems = ['Item1', 'Item2', 'Item3', 'Enter new option'];
   self.dropDownValue = ko.observable('one');
   self.textBoxVisible = ko.computed(function(){
      return self.dropDownValue() === 'Enter new option';
   });
   self.showTextBoxValue = function(){
      alert(self.chosenValue());
   };
   return self;         
}       

ko.applyBindings(new Demo());

在这里查看演示：http://jsfiddle.net/K2sU4/

【讨论】：