layui 下拉框二级联动

最新推荐文章于 2025-06-16 16:30:23 发布

原创最新推荐文章于 2025-06-16 16:30:23 发布 · 609 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#json #layui #html #javascript

该博客介绍了如何使用layui框架结合html和javascript，通过获取json数据实现下拉菜单的二级联动效果。主要内容包括html结构设定、js操作逻辑以及两个json文件的数据结构解析。

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

html部分

<div class="layui-row">
        <form class="layui-form ok-search-form" action='' method='post'>
            <div class="layui-form-item">

				<div class="layui-inline">
                    <div class="layui-input-inline">
                        <select id="category" name="category" lay-filter="category" lay-verify="required">
                            <option value="">类别</option>
                            <option value="1">品德</option>
                            <option value="2">才干</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select id="item" name="item" lay-verify="required">
                        <option value="">具体项</option>
                        </select>
                    </div>
                </div>
                
            </div>
        </form>
</div>

js操作部分

form.on('select(category)', function(data){
            $.getJSON("get"+data.value+".json", function(data){
                var optionstring = "";
                $.each(data.data, function(i,item){
                    optionstring += "<option value=\"" + item.code + "\" >"+item.name + "</option>";
                });
                $("#item").html('<option value=""></option>' + optionstring);
                form.render('select');
            });
});

json文件 get1.json

{
    "status": 200,
    "message": "result",
    "data": [
     {
      "code": "01",
      "name": "政治品德",
      "category": "品德"
     },
     {
      "code": "02",
      "name": "工作作风",
      "category": "品德"   
     },
     {
      "code": "03",
      "name": "个性特点",
      "category": "品德"
     },
     {
      "code": "04",
      "name": "群众基础",
      "category": "品德"   
     },
     {
      "code": "05",
      "name": "干部不足",
      "category": "品德"
     },
     {
      "code": "06",
      "name": "干部风险点",
      "category": "品德"   
     }
    ]
}

json文件 get2.json

{
    "status": 200,
    "message": "result",
    "data": [
     {
        "code": "07",
        "name": "能力类型",
        "category": "才干"
       },
       {
        "code": "08",
        "name": "专业特长",
        "category": "才干"   
       },
       {
        "code": "09",
        "name": "工作业绩",
        "category": "才干"
       },
       {
        "code": "10",
        "name": "分类考核",
        "category": "才干"   
       },
       {
        "code": "11",
        "name": "适宜岗位 ",
        "category": "才干"
       }    
    ]
}