H5下拉搜索框-layui

2022-08-02 16:02:18 阅读：157 来源： 互联网

标签：form layui 下拉 H5 test user jsonq var data

实现效果：

可实现下拉选择及搜索提示效果！使用layui前端框架。

一下为实现代码：

首先引入layui的JS和CSS:

<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script>

HTML:

<div class="layui-form-item" style="border-bottom:1px solid #009688;padding: 20px 10px;">
        <div class="layui-inline layui-form" style="width:240px;margin-right: 0;">
            <select name="modules" lay-verify="required" lay-search="" id="test_user" lay-filter="test_user">
                <option value="" selected>选择或输入...</option>
                <option value="010">北京</option>
                <option value="021">上海（禁用效果）</option>
                <option value="0571">杭州</option>
            </select>
        </div>
    </div>

js:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<script>
    layui.use('form', function () {
        form = layui.form;//必须执行这一步才会触发效果
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        //渲染下拉搜索框
        $.post('{:U("api/.../...")}', {}, function (data) {
            if (data.success) {
                var data = data.data;
                var len = data.length;
                var sel = ''
                for (var i = 0; i < len; i++) {
                    sel += '<option value="' + data[i].id + '" >' + data[i].nickname + '</option>'
                }
                $('#test_user').append(sel);
                form.render(); //更新全部
            }
        });
        //调用ajax返回数据并渲染下拉框
        $.ajax({
            type: "get",
            url: "../../xx",
            data: { "": "" },
            success: function (dq) {
                var jsonq = JSON.parse(dq);
                console.log(jsonq)
                if (jsonq.length > 0) {
                    //第一种：
                    var data = jsonq;
                    var len = jsonq.length;
                    var sel = ''
                    for (var i = 0; i < len; i++) {
                        sel += '<option value="' + data[i]["产品名称"] + '" >' + data[i]["产品名称"] + '</option>'
                    }
                    $('#test_user').append(sel);
                    form.render();
                    //第二种
                    for (var i = 0; i < jsonq.length; i++) {
                        var obj = document.getElementById('test_user');
                        obj.options.add(new Option(jsonq[i]["产品名称"], jsonq[i]["产品名称"]));
                    }
                    if (jsonq.length == 1) {
                        setSelectChecked("test_user", jsonq[0]["产品名称"]);
                    }
                }
            }
        })
        //监听下拉框
        form.on('select(test_user)', function (data) {
            var txt = $("#test_user option:selected").text();//获取select选中的值
            $('.test_user').html(txt);
        });
        //监听下拉框-方法  onchange="gradeChange()" 
        function gradeChange() {//下拉框选中事件
            var objS = document.getElementById("test_user");
            var grade = objS.options[objS.selectedIndex].value;//获取选中值
            alert(grade)
        }
    }) 
</script>

标签：form,layui,下拉,H5,test,user,jsonq,var,data
来源： https://www.cnblogs.com/BMxxx/p/BM_xxx.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

H5下拉搜索框-layui