JS / JQuery：来自select或来自文本输入的值

Question

我希望我的用户从<select>组件中选择一个值，但是如果他在<select>中找不到合适的值，我希望他能够自己输入值

我知道如何以肮脏的方式执行此操作：如果他单击一个复选框，我将停用<select>并激活选择侧的文本输入。使用角度JS，我甚至可以使选择消失并被文本输入替换。

但是，是否有单个组件可以让我解决这个问题而不添加一个复选框来勾选（页面上的空间有限，我想保存一些）？

Answer 1

您可以在选择下拉列表中添加一个选项，例如My option is not in the list，其值为0（或者您喜欢的内容），并在选择中附加更改事件。当select的值更改为0时，您可以使用jQuerys replceWith函数替换带有文本输入字段的select：http://api.jquery.com/replacewith/

编辑：我做了一点小提琴，这应该比上面的更容易理解;） http://jsfiddle.net/azumon0L/
注意：您可以使用文本输入的任何名称，这里我只是假设，您想要与Select ...中的相同...

Edit2：没有指定，用户应该能够回到选择，因为我是一个懒惰的混蛋，它没有添加它。但是，我已经更新了我的解决方案，现在它可以做你想要的！ http://jsfiddle.net/azumon0L/2/

Answer 2

另一种方法是在“设计页面”中同时提供选择下拉列表和文本框。 每当用户从选择下拉列表中选择选项时，选项的值应填入文本框。这可以通过select输入的jquery change事件来完成。 如果用户没有从选择下拉列表中找到所需选项，则用户可以在文本框中输入值。

这样，textbox的值可以用于存储在数据库中。