select框既可以手输入也可以选择

最新推荐文章于 2024-05-21 16:24:56 发布

javascript艺术

最新推荐文章于 2024-05-21 16:24:56 发布

阅读量4.4w

点赞数 14

分类专栏： javascript 文章标签： javascript css3 html

本文链接：https://blog.csdn.net/zhangjing1019/article/details/78971139

版权

javascript 专栏收录该内容

71 篇文章 2 订阅

订阅专栏

<!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="../js/jquery/jquery-3.2.1.js"></script>
<link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../js/bootstrap/js/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="trains" οnchange="qlcTrainS('qlc_zdz1')" 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的值赋给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>

因为我引用了bootstrap ，所以样式用了class=“form-control”,如果没有引用bootstrap，可以写自定义样式，原理是一样的，input框固定到select上面就行了

二、可以用H5新特性来完成这个功能

用datalist标签来给输入框提供一个选择（但是该属性不兼容IE9，只兼容到ie10及ie10+）；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>list属性示例</title>
</head>
<body>
text: <input type="text" name="greeting" list="greetings">
<!-- 使用style="display:none;"将datalist元素设定为不显示 -->
<datalist id="greetings" style="display:none;">
    <option value="Good Morning">Good Morning</option>
    <option value="Hello">Hello</option>
    <option value="Good Afternoon">Good Afternoon</option>
</datalist>
</body>
</html>

欢迎关注我的个人技术公众号！javascript艺术

javascript艺术

关注

14
点赞
踩
34

收藏

觉得还不错? 一键收藏
7
评论
select框既可以手输入也可以选择

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;meta charset="UTF-8"&gt;&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;&lt;meta name="viewport" content="width=device-widt
复制链接

扫一扫