html中select和input结合

最新推荐文章于 2023-06-12 15:56:42 发布

Misriluo

最新推荐文章于 2023-06-12 15:56:42 发布

阅读量8.5k

点赞数 2

分类专栏： Html 文章标签： select和input结合

本文链接：https://blog.csdn.net/taotao223/article/details/99350907

版权

Html 专栏收录该内容

1 篇文章

订阅专栏

本文提供了一个HTML页面示例，展示了如何使用JavaScript实现Select下拉框与Input框的联动效果。当用户在Select中选择一个选项时，该选项的值会自动填充到上方的Input框中，为用户提供了一种更灵活的输入方式。

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

直接上代码

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
 
<script src="jquery-3.2.1.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
<body>
 
<div style="padding:5px ;position:relative" class="col-sm-4">
    <span style="position:absolute;top:5px;overflow:hidden;width:95%;height:32px;">
        <!--这个是个多选框，用onchange事件的时候 ，将这个select的id传进去-->
               <select name="test" class="form-control" id="qlc_zdz1" style="height:30px;outline:0;">
                   <option value="test1">test1</option>
                   <option value="test2">test2</option>
                   <option value="test3">test3</option>
                   <option value="test4">test4</option>
                   <option value="test5">test5</option>
               </select>
 
    </span>
    <span style="position:absolute;top:7px;left:10px;margin-top:1px;margin-left:1px;width:80%;height:28px;border-radius:5px;">
        <!--这里是input框，定位到select的上面-->
              <input type="text" name="ccdd" id="qlc_zdz" class="ccdd" placeholder="可选择也可输入的下拉框" style="width:80%;height:24px;border:0pt;border-radius:5px;outline:0">
    </span>
</div>
<script>
<!--由于select中没有onclick方法,需要用js添加，上面的onclick方法可以删除-->
$(function(){
         $("select[name='test']").change(function(){
             qlcTrainS(this.id);
            })
        });

    <!--将select的值赋给input框-->
    function qlcTrainS(idName) {
            var arrValue=document.getElementById(idName).options[document.getElementById(idName).selectedIndex].value;
            $("#"+idName+"").parent('span').next('span').children('input.ccdd').val(arrValue)
    }
 
</script>
 
 
</body>
</html>

本文案例转自，https://blog.csdn.net/zhangjing1019/article/details/78971139，添加了一个方法，如有冒犯请告知，，谢谢