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

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

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

答案是可以的。下面就是用 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>

posted @ 2017-09-02 08:44  孟郎郎  阅读(748)  评论(0)    收藏  举报