数据类型:数组
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);
},
});
}
})