使得select选择框也可以输入

最新推荐文章于 2019-09-25 11:02:47 发布

testzhq426

最新推荐文章于 2019-09-25 11:02:47 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： Python Java C C++ C#

本文链接：https://blog.youkuaiyun.com/testzhq426/article/details/83469076

web 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，该示例通过JavaScript实现了下拉选择框的联动功能。当用户从第一个选择框中选择编程语言时，第二个文本框会显示所选的语言名称。此功能适用于创建动态表单，能够提升用户体验。

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


<HTML>
<HEAD>
<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>  
</HEAD>
<BODY>

</BODY>
</HTML>