Layui下拉框，可选择可输入

悦祎

已于 2022-05-20 16:35:57 修改

阅读量4.2k

点赞数

分类专栏：【Layui】文章标签： layui javascript elementui

于 2022-05-20 16:13:04 首次发布

原文链接：https://blog.youkuaiyun.com/weixin_44018338/article/details/100095519

版权

【Layui】专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用HTML和JavaScript实现输入框与下拉选择框的联动效果，通过设置样式和事件监听，确保输入框内容与下拉选项同步，并实现自动搜索过滤功能。

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

提示：首先是写死数据，未用到接口

html：

position:absolute 在这里是让input和select在同一位置。
z-index:2 是为了让input在select上面。
width:80% 是为了不盖住select后面的小三角符号，select还可以点击。
autocomplete="off" 为了不自动填充input框，免得压盖select选项

<div class="layui-form-item">
    <label class="layui-form-label commont_tag">开户行:</label>
    <div class="layui-input-inline">
        <input type="text" name="khh" id="khh" class="layui-input khh" style="position:absolute;z-index:2;width:80%;" lay-verify="required" value="河北省农村信用社" onkeyup="search()" autocomplete="off">
        <select id="hc_select" lay-filter="hc_select" autocomplete="off" lay-verify="required">
            <option value="河北省农村信用社" selected="">河北省农村信用社</option>
            <option value="秦皇岛银行">秦皇岛银行</option>
            <option value="中国银行">中国银行</option>
            <option value="中国农业银行">中国农业银行</option>
            <option value="中国工商银行">中国工商银行</option>
            <option value="中国建设银行">中国建设银行</option>
            <option value="中国民生银行">中国民生银行</option>
            <option value="中国邮政储蓄银行">中国邮政储蓄银行</option>
            <option value="交通银行">交通银行</option>
            <option value="河北银行">河北银行</option>
            <option value="招商银行">招商银行</option>
            <option value="浦发银行">浦发银行</option>
        </select>
        <div class="layui-form-select">
            <div class="layui-select-title"></div>
            <dl class="layui-anim layui-anim-upbit" style="display: none;">
                <dd lay-value="河北省农村信用社" class style="display: none;">河北省农村信用社</dd>
                <dd lay-value="秦皇岛银行" class style="display: none;">秦皇岛银行</dd>
                <dd lay-value="中国银行" class style="display: none;">中国银行</dd>
                <dd lay-value="中国农业银行" class style="display: none;">中国农业银行</dd>
                <dd lay-value="中国工商银行" class style="display: none;">中国工商银行</dd>
                <dd lay-value="中国建设银行" class style="display: none;">中国建设银行</dd>
                <dd lay-value="中国民生银行" class style="display: none;">中国民生银行</dd>
                <dd lay-value="中国邮政储蓄银行" class style="display: none;">中国邮政储蓄银行</dd>
                <dd lay-value="交通银行" class style="display: none;">交通银行</dd>
                <dd lay-value="河北银行" class style="display: none;">河北银行</dd>
                <dd lay-value="招商银行" class style="display: none;">招商银行</dd>
                <dd lay-value="浦发银行" class style="display: none;">浦发银行</dd>
            </dl>
        </div>
    </div>
</div>

js：

layui.config({base: '/layadmin/modul/common/'}).use(['form', 'dialog', 'his', 'laydate'], function () {
    var form = layui.form,
        dialog = layui.dialog,
        his = layui.his,
        date = layui.laydate;

    form.on('select(hc_select)', function (data) {   //选择移交单位 赋值给input框
        $("#khh").val(data.value);
        $("#hc_select").next().find("dl").css({ "display": "none" });
        form.render();
    });

    window.search = function () {
        var value = $("#khh").val();
        $("#hc_select").val(value);
        form.render();
        $("#hc_select").next().find("dl").css({ "display": "block" });
        var dl = $("#hc_select").next().find("dl").children();
        var j = -1;
        for (var i = 0; i < dl.length; i++) {
            if (dl[i].innerHTML.indexOf(value) <= -1) {
                dl[i].style.display = "none";
                j++;
            }
            if (j == dl.length-1) {
                $("#hc_select").next().find("dl").css({ "display": "none" });
            }
        }

    }
})

转载：https://blog.youkuaiyun.com/weixin_44018338/article/details/100095519

作者：那些年的代码

如侵权，请联系我删除~