html5如何实现文本框下拉选项功能

可以使用HTML5 list 属性。list 属性需要应用到 input 框上，然后内容写一个自定义的 id

然后在任意位置放一对 datalist 标签，并给 datalist 框一个 id，和 list 属性指向的 id 一致即可。

在 datalist 标签下放列表项，每个列表项用 option 元标签来表示，option 标签里用 value 属性填写内容，label 属性来做提示。

下面是示例代码：

<form action="">

<input type="text" list="url_list" name="text" />

<input type="submit" />

</form>

<datalist id="url_list">

<option label="HZ赫兹工作室" value="http://weibo.com/hz421247910" />

<option label="提示1" value="列表项1" />

<option label="提示2" value="列表项2" />

<option label="" value="列表项3" />

</datalist>

HTML5之前一般使用select标签或者div+js实现

1）、普通下拉列表菜单

html代码如下：

<form action="" method="get"> 

<label>1、普通下拉列表菜单</label> 

<select name=""> 

<option value="0">DIVCSS5</option> 

<option value="1">DIVCSS5</option> 

</select> 

</form> 

2）、跳转下拉列表菜单（如常见点击后跳转到选择网站）

常常一些网站做友情链接，与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。

跳转菜单html代码如下：

<form action="" method="get"> 

<label>2、跳转的下拉列表菜单</label> 

<select name="jumpMenu" id="jumpMenu"

 onchange="MM_jumpMenu('parent',this,0)"> 

<option value="http://www.Rothur.com/">Rothur</option> 

<option value="http://www.Rothur.com/">Rothur</option> 

</select> 

</form> 

实现跳转还需要在head标签内加入Js脚本动作代码：

<script type="text/javascript"> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'") if (restore) selObj.selectedIndex=0 } //--> </script>

<div class="searchModel">

<select name="" id="" value="2">

<option value="0">科室</option>

<option value="1">疾病</option>

<option value="2">医院</option>

</select>

<input type="text" placeholder="请输入搜索内容">

<button>搜索</button>

</div>

<style>

html,

body,

div,

input,

select,

button {

margin: 0

padding: 0

border: none

outline: none

}

.searchModel {

display: flex

border: 1px solid orange

border-radius: 4px

overflow: hidden

margin: 20px

height: 44px

}

.searchModel select {

color: #fff

background: orange

padding: 0 22px

/* appearance: none */

/* -moz-appearance: none */

/* Firefox */

/* -webkit-appearance: none */

/* Safari 和 Chrome */

}

select::-ms-expand {display: none}

.searchModel select option{

color: #333

background: #fff

}

.searchModel input {

flex: 1

padding: 0 10px

}

.searchModel button {

width: 44px

color: #fff

background: orange

}

</style>

要改变下拉选项选中的样式，就用div去模拟下拉框

js部分，button提交表单，或者是div模拟提交ajax

---