HTML可编辑的select

HTML可编辑Select实现

最新推荐文章于 2025-07-01 13:07:50 发布

原创最新推荐文章于 2025-07-01 13:07:50 发布 · 770 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用HTML、CSS和JavaScript实现可编辑下拉选择框的方法。通过将select元素与input元素结合，并利用JavaScript监听select变化来同步input值，实现了用户可以直接在下拉框中输入或选择的功能。

HTML可编辑的select实现原理还是用select和input伪装成的!

<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dth/xhtml1-transitional.dth"><html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript">      function changeF() {      document.getElementById('txt').value = document.getElementById('sel').options[document.getElementById('sel').selectedIndex].value;    } </script>  </head><body> <div style="position:relative; width: 240px;height:20px;margin-bottom:10px;margin-left:26px;">   <select id="sel"  style="float: right; height: 60%;width: 80%; z-index:88; position:absolute; left:10%; top:23%;" onchange="changeF();">    <option value="0">0</option>    <option value="0.85">0.85</option>   </select>  <input type="text" id="txt" value="" style="position:absolute; width:66%; height:50%; left:11%;top:25%;z-index:99; border:1px #FFF solid" />    </div></body></html>