有输入功能的select下拉框

有两种实现方式

  • 实现方式一:input和select重叠
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>js实现可输入的下拉框</TITLE>
</HEAD>
<BODY>
<div style="position:relative;">
<span style="margin-left:100px;width:18px;overflow:hidden;">
<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">
<option value="德国">德国</option>
<option value="挪威">挪威</option>
<option value="瑞士"> 瑞士</option>
</select></span><input name="box" style="width:100px;position:absolute;left:0px;">
</div>
</BODY>
</HTML>
  • 实现方式二:使用html5的datalist
<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>
发布了90 篇原创文章 · 获赞 14 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/u014229652/article/details/101013633
今日推荐