js实现二级联动

js实现二级联动

本文前端使用bootstrap渲染页面

<div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>一级联动选择：</label>
            <div class="formControls col-xs-5 col-sm-6">
                <span class="select-box" style="width: 550px;">
                    <select id="y" name="yy" class="select" onclick="onSelectChange()">
                        <option value="">-- 请选择 --</option>
                        <c:forEach items="${sysDictList}" var="sd">
                            <option value="${sd.value}">${sd.name}</option>
                        </c:forEach>
                    </select>
                </span>
            </div>
        </div>

当选择一级联动时触发js点击事件，执行二级联动操作

<div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>请选择二级联动：</label>
            <div class="formControls col-xs-5 col-sm-6">
                <span class="select-box" style="width: 550px;">
                    <select id="x" name="xx" class="select">
                        <option value="">-- 请选择 --</option>
                    </select>
				</span>
            </div>
        </div>

下面是具体js执行内容

function onSelectChange(){
        $.ajax({
            type : "POST",
            url : "/xx/yy",
            data : {
                y : $("#y").val()
            },
            success : function (data) {
                console.log(data)
                $('#x').html('');
                $('#x').html('<option value="">--请选择二级联动--</option>');
                for(var i = 0 ; i < data.length ; i++){
                    $('#x').append('<optgroup label="'+data[i].parentName+'">');
                    for(var j = 0 ; j < data[i].quotaTypeTreeList.length ; j++){
                        var cur = data[i].quotaTypeTreeList[j];
                        $('#x').append('<option value="'+cur.quotaId+'" '+'>'+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+cur.name+'</option>');
                    }
                    $('#x').append('</optgroup>');
                }
            },
            error : function (data) {
                errMsg(data.msg());
            }
        })
    }