下拉框三级联动（加自定义按钮）

数据类型：数组

var topClass = ['','1','2','3']
var firstClass = [
	[''],
    ['','1.1','1.2','1.3'],
    ['','2.1','2.2','2.3','2.4'],
    ['','3.1','3.2']
]
var secondClass = [
	[['']],
    [['','1.1.1','1.1.2','1.1.3'],['','1.2.1','1.2.2','1.2.3','1.2.4'],['']],
    [['','2.1.1','2.1.2','2.1.3'],['','2.2.1','2.2.2','2.2.3'],[''],['']],
    [['','3.1.1','3.1.2','3.1.3'],['','3.2.1','3.2.2','3.2.3']]
]

//加载下拉框内容方法
function loadClass(targetDom,items){
        for(var i = 0; i < items.length; i++){
            $(targetDom).append('<option value="'+items[i]+'" class="nocustomOption">' + items[i] +'</option>')
        }
        $('<option value="自定义" class="customOption">自定义</option>').insertAfter($(targetDom).find("option:first"))
        $(targetDom).find("option:first").prop("selected",true).change()
    }

//一级分类
$("select[name='topClassName']").unbind('change').bind('change',function () {
		//每一次一级分类change，将二三级清空
        $("select[name='firstClassName']").empty()
        $("select[name='secondClassName']").empty()
        //加载一级分类下拉框
        for(var i = 0; i < selectItems.topClassName.length; i++){
            if($("select[name='topClassName'] :selected").val() == selectItems.topClassName[i]){
                loadClass($("select[name='firstClassName']"),selectItems.firstClassName[i])
            }
        }
        //点击自定义按钮
        if($("select[name='topClassName']").find("option[class='customOption']").prop("selected") == true){
            $("select[name='topClassName']").find("option:first").prop("selected",true).change()
            var index = layer.open({
                type: 1,
                skin: "layui-layer-rim",
                area: ["550px", 'auto'],
                title: "自定义",
                content: '<div style="margin-left: 20px">请输入自定义名称：<input type="text" id="setName" style="margin-top: 20px;"/></div>',
                btn: ['确定', '取消'],
                shadeClose:true,
                yes: function (index, layero) {
                    var customName = $.trim($("#setName").val());
                    if(customName == ''){
                        layer.alert('自定义名称不能为空！');
                        layer.close(index);
                        return
                    }else{
                        $("select[name='topClassName']").append('<option  class="nocustomOption" value="'+customName+'">'+ customName +'</option>')
                        $("select[name='topClassName']").find('option[class="nocustomOption"][value="'+customName+'"]').prop('selected',true).change()
                        selectItems.topClassName.push(customName);
                        selectItems.firstClassName.push(['','未知']);
                        selectItems.secondClassName.push([['','未知'],['','未知']]);
                        loadClass($("select[name='firstClassName']"),selectItems.firstClassName[selectItems.firstClassName.length-1])
                        layer.close(index);
                    }

                },
                btn2: function (index, layero) { //取消按钮后的处理函数
                    layer.close(index);
                },
            });
        }

    })

//二级分类change事件
$("select[name='firstClassName']").unbind('change').bind('change',function () {
        $("select[name='secondClassName']").empty()
        //加载二级分类下拉框
        outer:
        for(var i = 0; i < selectItems.topClassName.length; i++){
            for(var j = 0; j < selectItems.firstClassName[i].length; j++){
                if($("select[name='firstClassName'] :selected").val() == selectItems.firstClassName[i][j]){
                    loadClass($("select[name='secondClassName']"),selectItems.secondClassName[i][j])
                    break outer;
                }
            }
        }
        if($("select[name='firstClassName']").find("option[class='customOption']").prop("selected") == true){
            $("select[name='firstClassName']").find("option:first").prop("selected",true).change()
            var index = layer.open({
                type: 1,
                skin: "layui-layer-rim",
                area: ["550px", 'auto'],
                title: "自定义",
                content: '<div style="margin-left: 20px">请输入自定义名称：<input type="text" id="setName" style="margin-top: 20px;"/></div>',
                btn: ['确定', '取消'],
                shadeClose:true,
                yes: function (index, layero) {
                    var customName = $.trim($("#setName").val());
                    if(customName == ''){
                        layer.alert('自定义名称不能为空！');
                        return
                    }else{
                        $("select[name='firstClassName']").append('<option  class="nocustomOption" value="'+customName+'">'+ customName +'</option>')
                    }
                    $("select[name='firstClassName']").find('option[class="nocustomOption"][value="'+customName+'"]').prop('selected',true).change()

                    var topIndex = selectItems.topClassName.indexOf($("select[name='topClassName'] option:selected").val());
                    selectItems.firstClassName[topIndex].push(customName);
                    selectItems.secondClassName[topIndex].push(['','未知'])
                    loadClass($("select[name='secondClassName']"),selectItems.secondClassName[topIndex][selectItems.secondClassName[topIndex].length-1])
                    layer.close(index);
                },
                btn2: function (index, layero) { //取消按钮后的处理函数
                    layer.close(index);
                },
            });
        }
    })

//三级分类change事件
$("select[name='secondClassName']").unbind('change').bind('change',function () {
        if($("select[name='secondClassName']").find("option[class='customOption']").prop("selected") == true){
            $("select[name='secondClassName']").find("option:first").prop("selected",true).change()
            var index = layer.open({
                type: 1,
                skin: "layui-layer-rim",
                area: ["550px", 'auto'],
                title: "自定义",
                content: '<div style="margin-left: 20px">请输入自定义名称：<input type="text" id="setName" style="margin-top: 20px;"/></div>',
                btn: ['确定', '取消'],
                shadeClose:true,
                yes: function (index, layero) {
                    var customName = $.trim($("#setName").val());
                    if(customName == ''){
                        layer.alert('自定义名称不能为空！');
                        return
                    }else{
                        $("select[name='secondClassName']").append('<option  class="nocustomOption" value="'+customName+'">'+ customName +'</option>')
                    }
                    $("select[name='secondClassName']").find('option[class="nocustomOption"][value="'+customName+'"]').prop('selected',true).change()
                    var topIndex = selectItems.topClassName.indexOf($("select[name='topClassName'] option:selected").val());
                    var firstIndex = selectItems.firstClassName[topIndex].indexOf($("select[name='firstClassName'] option:selected").val());
                    selectItems.secondClassName[topIndex][firstIndex].push(customName);
                    layer.close(index);
                },
                btn2: function (index, layero) { //取消按钮后的处理函数
                    layer.close(index);
                },
            });
        }

    })