您现在的位置:首页 >> 前端 >> 内容

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

时间:2017/8/11 9:46:00 点击:

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

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

HTML代码:

            <p 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>
                <input  id="inputselect" type="text"ng-model="binding.value"  style="width:90%;height:26px;position: relative;top: -26px"ng-change="valueChange()" />
            </p>

注意,input最好在select之后写,ng-model需要绑定同一数据。然后input和select框的大小和位置根据实际情况进行调整。最后效果应该是这样的
可以输入值的下拉框(select和input的组合使用)

文本框可以输入数据,与binding.value绑定,传给select,即可实现可输入可选择的需求。

作者:网络 来源:LHJBK的博客