前端那些事之jquery和ajax实现二级联动

最新推荐文章于 2021-02-12 11:41:33 发布

weixin_33778778

最新推荐文章于 2021-02-12 11:41:33 发布

阅读量91

点赞数

文章标签：前端 javascript python ViewUI

原文链接：https://my.oschina.net/yongxinke/blog/822423

版权

2019独角兽企业重金招聘Python工程师标准>>>

jquery和ajax实现二级联动

结合layui实现二级联动案例，代码更改如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<form class="layui-form" action="#" id="form1">
    <div class="layui-input-inline">
        <select name="quiz3" id="sel" lay-filter="sel">
            动态添加select的时候，一定要加一个默认的option，不然会报错
            <option></option>
        </select>
    </div>
    <div class="layui-input-inline">
        <select name="quiz3" id="sel2" lay-filter="sel2">
            动态添加select的时候，一定要加一个默认的option，不然会报错
            <option></option>
        </select>
    </div>
</form>
<script src="layui/layui.js"></script>
<script src="jquery-2.2.4.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'jquery', 'laytpl'], function () {
        var form = layui.form(),
            layer = layui.layer,
            layedit = layui.layedit,
            $ = layui.jquery,
            laydate = layui.laydate;
        //监听提交
        var datas;
        form.on('select(sel)', function(data){
//            console.log(data.elem); //得到select原始DOM对象
//            console.log(data.value); //得到被选中的值
             datas=data.value;
            loadDevice(datas);
            console.log(datas);

            function loadDevice(departmentId) {
                $.ajax({
                    url: 'query?=' + departmentId,
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (msg) {
//                        console.log(msg);

                        $.each(eval(msg), function (i, item) {
                            console.log(item);

                            $(
                                "<option value='" + item.id + "'>" + item.id + "</option>"+
                                "<option value='" + item.name + "'>" + item.name + "</option>"+
                                "<option value='" + item.phone + "'>" + item.phone + "</option>"
                            ).appendTo($("#sel2"));
                        });
                    }

                });
                form.render('select');//一定要加form.render();
            }
        });

        $.ajax({
            url: 'user.json',
            success: function (data) {
                $.each(eval(data), function (i, item) {
//                    console.log(item);
                    $.each(item,function (i,item) {
                        console.log(item);
                        $(
                            "<option value='" + item.name + "'>" + item.name + "</option>" +
                            "<option value='" + item.id + "'>" + item.id + "</option>" +
                            "<option value='" + item.userSex + "'>" + item.userSex + "</option>"
                        ).appendTo($("#sel"));
                    })


                });
                form.render('select');//一定要加form.render();
            }
        });


    });

</script>
</body>
</html>

原demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form id="form1" action="search.action" method="post">
    <select name="departmentId" id="departmentId"><option value="0">查询所有</option></select><br />
    <select name="deviceId" id="deviceId"><option value="0">查询所有</option></select><br />
    <img src="images/search.gif"  onclick="sub()" />
    </form>

<script type="text/javascript" src="jquery-2.2.4.js"></script>
<script type="text/javascript">


    $(function(){
        $.ajax({
            url: "deJson.action",
            type: 'POST',
            dataType: 'JSON',
            timeout: 5000,
            //error: function() {alert('加载数据异常，请重试!');},
            success: function(data) {
                //$("#departmentId").empty();
                $.each(eval(data), function(i, item) {
                    $("<option value='" + item.id + "'>" + item.name + "</option>").appendTo($("#departmentId"));
                });
            }
        });
        $("#departmentId").click(function() {
            loadDevice($("#departmentId").val());
        });

        function loadDevice(departmentId) {
            $.ajax({
                url: 'dJson.action?departmentId='+ departmentId,
                type: 'POST',
                dataType: 'JSON',
                timeout: 5000,
                error: function() { alert('加载数据异常，请重试!'); },
                success: function(msg) {
                    if(msg=="{[]}"){
                        $("#deviceId").empty();
                        $("<option value='0'>查询所有</option>").appendTo($("#deviceId"));
                    }else{
                        $("#deviceId").empty();
                        $("<option value='0'>查询所有</option>").appendTo($("#deviceId"));
                        $.each(eval(msg), function(i, item) {
                            $("<option value='" + item.deviceId + "'>" + item.name + "</option>").appendTo($("#deviceId"));
                        });
                    }
                }
            });
        }
    })

    function sub(){
        document.getElementById("inneralert").style.display="block";
        $("#form1").submit();
    }


</script>
</body>
</html>

##数据类型

[
  {
    "comboType": "INPUT",
    "modelPropertyCode": "policyNo",
    "name": "保单号"
  },
  {
    "comboType": "MULTIPUT",
    "modelPropertyCode": "departmentCode",
    "name": "承保机构"
  },
  {
    "comboType": "DATE",
    "modelPropertyCode": "applyTime",
    "name": "投保日期"
  },
  {
    "comboType": "DATE",
    "modelPropertyCode": "firstRegisterDate",
    "name": "车辆初登日期"
  },
  {
    "modelPropertyCode": "planCode",
    "name": "保单类型"
  },
  {
    "modelPropertyCode": "specialStr",
    "name": "特别约定"
  },
  {
    "modelPropertyCode": "channelSourceCode",
    "name": "渠道来源"
  },
  {
    "modelPropertyCode": "channelSourceDetailCode",
    "name": "渠道来源细分"
  },
  {
    "modelPropertyCode": "clientType",
    "name": "客户类型"
  },
  {
    "modelPropertyCode": "personalName",
    "name": "被保人名称"
  },
  {
    "modelPropertyCode": "vehicleSeat",
    "name": "核定座位数"
  },
  {
    "modelPropertyCode": "vehicleType",
    "name": "车辆类型"
  },
  {
    "modelPropertyCode": "autoModelChnName",
    "name": "厂牌车型"
  },
  {
    "modelPropertyCode": "usageAttributeCode",
    "name": "使用（营运）性质"
  },
  {
    "modelPropertyCode": "applicationBusinessType",
    "name": "投保人个团属性"
  },
  {
    "modelPropertyCode": "vehicleFrameNo",
    "name": "车架号"
  },
  {
    "modelPropertyCode": "endorsementTimes",
    "name": "批改次数"
  },
  {
    "modelPropertyCode": "endorseNo",
    "name": "批单号"
  },
  {
    "modelPropertyCode": "purcharsePrice",
    "name": "新车购置价"
  },
  {
    "modelPropertyCode": "lastCrashTimes",
    "name": "上年出险次数"
  },
  {
    "modelPropertyCode": "totalActualPremium",
    "name": "商业险保费区间"
  },
  {
    "modelPropertyCode": "insuranceBeginDate",
    "name": "保险起期"
  },
  {
    "modelPropertyCode": "insuranceEndDate",
    "name": "保险止期"
  },
  {
    "modelPropertyCode": "insuredAmount",
    "name": "车损险保额"
  },
  {
    "modelPropertyCode": "insuredAmount2",
    "name": "三者险保额"
  },
  {
    "modelPropertyCode": "lastPolicyNo",
    "name": "上年保单号"
  },
  {
    "modelPropertyCode": "coinsuranceMark",
    "name": "共保标志"
  },
  {
    "modelPropertyCode": "vehicleTonnages",
    "name": "吨位数"
  },
  {
    "modelPropertyCode": "clientReMark",
    "name": "客户备注信息"
  },
  {
    "modelPropertyCode": "rescueType",
    "name": "救援类型"
  },
  {
    "modelPropertyCode": "rescuePlace",
    "name": "救援地点"
  },
  {
    "modelPropertyCode": "rescueTarget",
    "name": "救援目标"
  },
  {
    "modelPropertyCode": "responsibilityBelong",
    "name": "责任方"
  },
  {
    "modelPropertyCode": "source",
    "name": "数据来源"
  },
  {
    "modelPropertyCode": "customFlag",
    "name": "客户标识"
  },
  {
    "modelPropertyCode": "province",
    "name": "省份"
  },
  {
    "modelPropertyCode": "city",
    "name": "城市"
  },
  {
    "modelPropertyCode": "area",
    "name": "区域"
  },
  {
    "modelPropertyCode": "projectItem",
    "name": "项目"
  }
]

转载于:https://my.oschina.net/yongxinke/blog/822423