用layer弹窗实现一个简单的类别选择

因为项目需求要实现一个类别选择功能,就是在我点击下拉框并且选择一个分类时,如果这个分类还有子分类,则又会出现一个新的下拉框,直到这个分类没有子分类为止

$.ajax({
        type: "get",
        url: "/*****/childNodes",
        traditional: true,
        data: {cids: cids},
        success: function (dataList) {
            //没有查询到cid则说明已经是没有子分类了
            if (dataList == null || dataList.length == 0) return;
            var option;
            //拼接select的选项属性
            $.each(dataList, function (k, v) {
                option += '<option value="' + v.categoryId + '">' + v.categoryName + '</option>';
            });
            var select = '<select id="originCid_' + selectIndex + '" class="form-control" name="originCid">' +
                '<option value="0">请选择</option>' + option + '</select>';
            $("#categorySelect").append(select);
            //每个select元素高度间隔10px
            $("#categorySelect select").css("margin-top", "3px");
            //select值更换则触发
            $("#originCid_" + selectIndex).change(function () {
                if ($(this).val() != 0) getCategory(selectIndex + 1);
            });
        }
    });

/**
 * 根据Cid获取类目信息,如果Cid不是父类则不会返回数据
 * @param cid            类目ID
 * @param selectIndex    用于拼接select元素的id
 */
function getCategory(cid, selectIndex) {
    //从二级分类开始检查，如果发现二级目录更变了则删除二级分类下的选择
    for (var i = 1; i < selectIndex; i++) {
        $("#originCid_" + i).change(function () {
            $(this).nextAll().remove();
        });
    }
    $.ajax({
        type: "get",
        url: "****",
        data: {cid: cid},
        success: function (dataList) {
            //没有查询到cid则说明已经是没有子分类了
            if (dataList.length == 0) return;
            var option;
            //拼接select的选项属性
            $.each(dataList, function (k, v) {
                option += ''<option value="'' + v.cid + ''">'' + v.name + ''</option>'';
            });
            var select = ''<br><select id="originCid_'' + selectIndex + ''"><option value="0">请选择</option>'' + option + ''</select>'';
            $("#catagorySelect").append(select);
            //每个select元素高度间隔10px
            $("#catagorySelect select").css("margin-top", "10px");
            //
            $("#originCid_" + selectIndex).change(function () {
                if ($(this).val() != 0) getCategory($(this).val(), selectIndex + 1);
            });
        }
    });

效果如下图