javascript三级联动效果实现

标签：javascript级联; 三级联动

function linkQ(sel1,sel2,sel3,arr){
    var sel1v=$.map(arr,function(val,key){return key})
    // 将sel1的option放入
    $.each(arr,function(i,n){
        sel1.append("<option value="+ n.provinceId +">"+ n.provinceName +"</option>")
    })

    // 将sel1第一项对应sel2的option放入
    // sel1 change事件开始联动 3级联动
    if(arguments.length==4){
        sel1.on(‘change‘,function(){
            sel2.html("");
            sel2.append("<option value>-请选择-</option>");
            sel3.html("");
            sel3.append("<option value>-请选择-</option>");

            var index=sel1.get(0).selectedIndex-1;
            if(index<0){index=0};
            var sel2v=$.map(arr[sel1v[index]].cities,function(val,key){return key})
            $.each(sel2v,function(i, n){
                sel2.append("<option value="+ arr[sel1v[index]].cities[n].cityId +">"+ arr[sel1v[index]].cities[n].cityName +"</option>")
            })
        })
        sel2.on(‘change‘,function(){
            sel3.html("");
            sel3.append("<option value>-请选择-</option>");
            var index2=sel2.get(0).selectedIndex-1;
            var index=sel1.get(0).selectedIndex-1;
            if(index<0){index=0};
            if(index2<0){index2=0};
            var sel2v=$.map(arr[sel1v[index]].cities,function(val,key){return key});
            var ans=arr[sel1v[index]].cities[sel2v[index2]].dealers;
            $.each(ans,function(i, n){
                sel3.append("<option value="+ n.dealerCode+":"+n.tsub +">"+ n.dealerName +"</option>")
            })
        })
    }
}

linkQ($("#p1"),$("#c1"),$("#d1"),arrJson);

本文出自 “Pureweber技术” 博客，请务必保留此出处http://tomastong.blog.51cto.com/8722734/1693803

javascript三级联动效果实现

标签：javascript级联; 三级联动

原文地址：http://tomastong.blog.51cto.com/8722734/1693803