layui 下拉框二级联动

该博客介绍了如何使用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": "才干"
       }    
    ]
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值