您的位置:首页 > Web前端 > JQuery

使用JQUERY实现JSON数据三级联动

2015-09-16 16:06 761 查看
<!DOCTYPE  html>
<html>
<head>
<title>json数据三级联动select</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<div>
<label>品牌:</label><select id="sel1"></select>
<label>型号:</label><select id="sel2"></select>
<label>价格:</label><select id="sel3"></select>
</div>
<script type="text/javascript">
(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 += '<option value="' + data.car[i].brand + '" selected="selected">' + data.car[i].brand + '</option>';
}else{
html += '<option value="' + data.car[i].brand + '">' + data.car[i].brand + '</option>';
}
}
$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
.param.length;
for(var i = 0; i < len; i++){
if(i == q){
html += '<option value="' + data.car
.param[i].name + '" selected="selected">' + data.car
.param[i].name + '</option>';
}else{
html += '<option value="' + data.car
.param[i].name + '" >' + data.car
.param[i].name + '</option>';
}
}
$sel2.html(html);
select_3(n,q);
}

function select_3(n,q){//构造第三个select
var n = n || 0;
var q = q || 0;
var html = '';
html += '<option value="' + data.car
.param[q].price + '" >' + data.car
.param[q].price + '</option>';
$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);
</script>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  json jquery js