可以输入值的下拉框（select和input的组合使用）

原创

于 2017-08-09 17:45:48 发布 · 4.1w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #select #数据

为了提升用户体验，有时需要在下拉框中允许用户输入搜索。本文提供了一段HTML代码，展示了如何结合select和input实现一个既可以输入又可以选择的下拉框。通过将ng-model绑定到相同数据，可以实现输入与选择的无缝切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一些时候为了方便用户，提升用户的良好体验，我们需要在设计下拉框的同时，允许用户输入自己的数据，方便提高搜索效率。下面一段简单的代码实现，select和input的结合实现可以输入数据的下拉框。

HTML代码：

            <div style=":auto;padding:5px;">
                <select  id="demoSelect" ng-model="binding.value"  style="width:100%;height:26px;"  ng-options="key for key in binding.landarr"></select

最低0.47元/天解锁文章

200万优质内容无限畅学