html 中可以自定义输入的 select 下拉列表

最新推荐文章于 2024-08-12 15:55:57 发布

孟郎郎

最新推荐文章于 2024-08-12 15:55:57 发布

阅读量1.4w

点赞数 3

分类专栏：编程语言文章标签： html select 自定义 javascript

本文为孟郎郎（http://www.menglanglang.cn)原创文章，转载请注明文章链接。

本文链接：https://blog.csdn.net/tzhuwb/article/details/77790811

版权

编程语言专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在项目开发中，往往有这种需求：那就是需要下拉选择已有的数据列表，当没有自己需要的数据时，往往需要去管理这些列表数据的画面去添加，或者在下拉列表后面放一个快捷按钮，先添加，然后再选。

那么问题就来了，如果按照上面的操作，往往需要很多步骤，能不能当没有可选项目时，直接在下拉列表上输入呢？

答案是可以的。下面就是用 JS 实现了下拉列表上自定义选项的功能，请参考。

<!DOCTYPE html>
<html>
    <head>
        <title>可编辑的下拉列表</title>
    </head>
    <style type="text/css">
        .cls_select_span {
            position:absolute;
            border:1pt solid #c1c1c1;
            overflow:hidden;
            width:188px;
            height:19px;
            clip:rect(-1px 190px 190px 170px);
        }
        .cls_input_span {
            position:absolute;
            border-top:1pt solid #c1c1c1;
            border-left:1pt solid #c1c1c1;
            border-bottom:1pt solid #c1c1c1;
            width:170px;
            height:19px;
        }
        .cls_option_defined {
            color:#c2c2c2;
        }
        .cls_select {
            width:190px;
            height:20px;
            margin:-2px;
        }
        .cls_input {
            width:170px;
            height:15px;
            border:0pt;
        }
    </style>
    <body>
    <span class="cls_select_span">
        <select id="id_select" class="cls_select" onChange="selectOnChangeFunc()">
            <option value="" class="cls_option_defined">---自定义---</option>
            <option value="开发部">开发部</option>
            <option value="市场部">市场部</option>
            <option value="销售部">销售部</option>
        </select>
    </span>
    <span class="cls_input_span">
        <input type="text" id="id_input" class="cls_input" value="可选择也可自定义输入">
    </span>
    <script>
        function selectOnChangeFunc() {
            document.getElementById('id_input').value = document.getElementById('id_select').options[document.getElementById('id_select').selectedIndex].value;
        }
    </script>
    </body>
</html>