layui实现下拉框输入内容

最新推荐文章于 2026-01-21 14:42:37 发布

原创最新推荐文章于 2026-01-21 14:42:37 发布 · 4.1k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html

收录于

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用layui框架实现在下拉框中自定义输入功能，通过监控select变化并将选中值赋给input标签，适用于选项不足时自行添加的情况。

layui实现下拉框输入内容，通过添加一个input标签，设置其style。通过layui.form.on()监控select的变化，当其发生变化时，把选中的值赋给input标签。

使用场景：当下拉框的选项不满足时，可以自己添加，然后读取input的值，传给后端。

                    <input type="text" name="text" id="LicenseIdtext" class="layui-input" style="position:absolute;z-index:2;width:90%;"  value=""   autocomplete="off">
                    <select type="text" lay-filter="selects" autocomplete="off" placeholder=""  class="layui-select">
                        <option value="">请选择</option>
                    </select>

    layui.form.on('select(selects)', function (data) {
    //对select和input进行监控渲染
        if (data.value != "") {        
            $("#text").val(data.value);
        }        
}