ajax实现三级联动菜单,使用JQUERY实现json数据三级联动select

json数据三级联动select

品牌：

型号：

价格：

(function($){

var data = {'car':[

{'brand':'本田','param':[

{'name':'飞度','price':'9w'},

{'name':'锋范','price':'10w'},

{'name':'思域','price':'14w'},

{'name':'xx','price':'15w'}

]},

{'brand':'宝马','param':[

{'name':'3x','price':'49w'},

{'name':'5x','price':'70w'},

{'name':'7x','price':'214w'}

]},

{'brand':'奔驰','param':[

{'name':'C级','price':'28w'},

{'name':'E级','price':'40w'}

]}

]};

//console.log(data);

var $sel1 = $('#sel1');

var $sel2 = $('#sel2');

var $sel3 = $('#sel3');

function select_1(n){//构造第一个select

var n = n || 0;

var html = '';

var len = data.car.length;

for(var i = 0; i < len; i++){

if(i == n){

html += '' + data.car[i].brand + '';

}else{

html += '' + data.car[i].brand + '';

}

}

$sel1.html(html);

select_2(n);

}

function select_2(n,q){//构造第二个select

var n = n || 0;

var q = q || 0;

var html = '';

var len = data.car[n].param.length;

for(var i = 0; i < len; i++){

if(i == q){

html += '' + data.car[n].param[i].name + '';

}else{

html += '' + data.car[n].param[i].name + '';

}

}

$sel2.html(html);

select_3(n,q);

}

function select_3(n,q){//构造第三个select

var n = n || 0;

var q = q || 0;

var html = '';

html += '' + data.car[n].param[q].price + '';

$sel3.html(html);

}

select_1();//初始化

$sel1.change(function(){//绑定第一个select

var n = $sel1.find(':selected').index();

select_1(n);

});

$sel2.change(function(){//绑定第二个select

var n = $sel1.find(':selected').index();

var q = $sel2.find(':selected').index();

select_3(n,q);

});

})(jQuery);

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]