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);

運行代碼

復制代碼

另存代碼

提示：您可以先修改部分代碼再運行

總結

以上是生活随笔為你收集整理的php 汽车品牌三级联动,车辆品牌型号的三级联动菜单怎么做的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。