有输入功能的select下拉框

最新推荐文章于 2024-05-21 16:24:56 发布

qinhej

最新推荐文章于 2024-05-21 16:24:56 发布

阅读量1k

点赞数

分类专栏：前端文章标签： html select 可输入

本文链接：https://blog.csdn.net/u014229652/article/details/101013633

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

有两种实现方式

实现方式一：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>

qinhej

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
有输入功能的select下拉框

有两种实现方式实现方式一：input和select重叠<HTML><HEAD><META http-equiv='Content-Type' content='text/html; charset=gb2312'><TITLE>js实现可输入的下拉框</TITLE></HEAD><BODY>&l...
复制链接

扫一扫

专栏目录