editable select

最新推荐文章于 2024-08-08 07:50:42 发布

转载最新推荐文章于 2024-08-08 07:50:42 发布 · 1.9k 阅读

本文介绍了一个简单的HTML下拉框联动效果实现方式。通过特定的HTML结构与JavaScript代码结合，可以创建一个美观且实用的下拉选择框，当用户在选择框中做出选择时，其内容会同步显示在旁边的输入框内。

< 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.options[this.selectedIndex].text; " >
         < option value = " -1 " > 请选择1 </ option >
         < option value = " 1 " > 请选择2 </ option >
     </ select >
     </ span >
     < input type = " text " style = " width:100px;position:absolute;left:0px; " value = " 请选择... " >
</ div >