有输入功能的HTML下拉框

最新推荐文章于 2023-08-31 10:10:18 发布

yu555666

最新推荐文章于 2023-08-31 10:10:18 发布

阅读量1.7w

点赞数 2

CC 4.0 BY-SA版权

文章标签： html input div table border 存储

本文链接：https://blog.csdn.net/yu555666/article/details/1508147

本文介绍了一种使用HTML和JavaScript实现的上海地区县下拉选择框。该选择框由一个隐藏的`<select>`元素和一个可见的`<input>`元素组成，通过JavaScript将选中的值同步到`<input>`中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<DIV style="POSITION: absolute">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
    <TR>
        <TD>
            <SELECT name="districtSelect" style="LEFT: 0px; TOP: 0px; WIDTH: 100px; CLIP: rect(0px auto auto 80px); POSITION: absolute" onchange="document.getElementById('district').value=this.options[this.selectedIndex].value">
                <OPTION value="YangPu" selected>YangPu</OPTION>
                <OPTION value="HongKou">HongKou</OPTION>
                <OPTION value="XuHui">XuHui</OPTION>
                <OPTION value="PuDong">PuDong</OPTION>
            </SELECT>
            <INPUT id="district" name="district" style="LEFT: 0px; TOP: 0px; WIDTH: 81px; POSITION: absolute">
        </TD>
    </TR>
</TBODY>
</TABLE>
</DIV>

使用时，应该把上面包括DIV标签在内的所有的代码放到你想放置下拉框的地方。

　　事实上，这个下拉框是由一个input和一个select组成的，select只是提供选择的内容，而实际的值是存储在input中的，所以你应该取input值作为这个下拉框的最终值。