使得select选择框也可以输入

最新推荐文章于 2024-04-29 16:54:47 发布

原创最新推荐文章于 2024-04-29 16:54:47 发布 · 646 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了一个使用 JavaScript 实现的选择器与文本框联动的简单示例。当用户从下拉选择器中选择不同的编程语言选项时，相应的值会自动填充到旁边的文本框中。该示例展示了如何利用 JavaScript 和 HTML 进行基本的网页交互设计。

<script language="javascript">
function changeF()
{
document.getElementById('makeupCo').value=
document.getElementById('makeupCoSe').options[document.getElementById('makeupCoSe').selectedIndex].value;
}
</script>
<span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;
height:19px;clip:rect(-1px 190px 190px 170px);">
<select name="makeupCoSe" id="makeupCoSe" style="width:190px;height:20px;margin:-2px;" onChange="changeF();">
<option id='1' value='java'>java</option>
<option id='2' value='c++'>c++</option>
<option id='3' value='python'>python</option>
<OPTION id="99999" VALUE="" SELECTED>
</select>
</span>
<span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt
solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">
<input type="text" name="makeupCo" id="makeupCo" value="请选择或输入" style="width:170px;height:15px;border:0pt;">
</span>