资深前端开发人员都知道，组合框是一个常见的网页元素，它允许用户从先前定义的选项列表中选择一个选项。然而，有时候我们需要一个能够让用户编辑和添加选项的组合框。
使用<input />元素
最简单的方法是直接使用<input />元素。将其设置为文本输入类型，然后使用datalist元素定义选项列表。这样，用户可以自由地编辑和添加选项。
<label for="fruits">请选择或输入水果：</label> <input list="fruits" name="fruit"> <datalist id="fruits"> <option value="苹果"> <option value="香蕉"> <option value="橘子"> </datalist>
上面的代码演示了如何创建一个可编辑的组合框，其中列表中包含三个水果选项。用户可以从列表中选择一项，也可以在文本框中输入新的选项。
使用<select>元素
如果您需要更多的控制权，可以使用<select>元素。通过添加一个“添加”按钮，并将其与一个文本框一起放置在下拉列表下方，用户可以轻松地添加新选项。
-- -------------------- ---- ------- ------ ------------------------------- ------- ---------- ------- -------------------------- ------- ------------------------ ------- ---------------------------- ------- ------------------------ --------- ------ ----------- ------------- ------- ------------------------------ -------- -------- -------- - --- ----- - ----------------------------------- --- ------ - -------------------------------- --- ------ - --------------------------------- ----------- - ------------ ------------------- ----------- - --- - ---------
上面的代码演示了如何创建一个包含四个汽车品牌选项的组合框，并允许用户添加新的选项。当用户单击“添加”按钮时，JavaScript函数将从文本框中获取输入并将其添加到下拉列表中。
总结
无论您选择哪种方法，都可以使用HTML和JavaScript轻松地创建可编辑的组合框。通过这些技术，您可以帮助用户更方便地填写表单，同时避免了在使用静态选项时出现的限制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29230