JS实现下可输入拉选框

最新推荐文章于 2023-02-06 16:55:13 发布

thoughtfly

最新推荐文章于 2023-02-06 16:55:13 发布

阅读量117

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： JavaScript ViewUI

本文链接：https://blog.youkuaiyun.com/thoughtfly/article/details/83557125

web前端专栏收录该内容

73 篇文章

订阅专栏

本文介绍了一段JavaScript代码，该代码实现了当选择下拉框中的选项时，相应的值会自动填充到输入框中。通过监听下拉框的改变事件触发函数来更新输入框的值。

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

直接附上代码

<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='test1'>test1</option>
    <option id='2' value='test2'>test2</option>
    <option id='3' value='test3'>test3</option>
</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>