<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select >
<option value="">品牌</option>
<option value="">宝马</option>
<option value="">奔驰</option>
</select>
<select >
<option value="">车型</option>
<option value="">520LI</option>
</select>
<select >
<option value="">车款</option>
<option value="">2016 1.8T</option>
</select>
</body>
<script src="js/make_json.js" type="text/javascript" charset="utf-8"></script>
<script src="js/model_json.js" type="text/javascript" charset="utf-8"></script>
<script src="js/car_json.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var car_json ={
5001: [{
name: "1.8 TSI 2012-2014",
pinyin: "",
id: 129643
}],
5002: [{
name: "2.0 TSI 2012-2014",
pinyin: "",
id: 129176
}]
};
var make_json = {
aodi: {
name: "奥迪",
id: 272
},
baoma: {
name: "宝马",
id: 270
}
}
var model_json = {
201: [{
name: "Leon Cupra",
pinyin: "",
id: 5002
}, {
name: "Leon FR",
pinyin: "",
id: 5001
}]
}
//0. 获取元素
var selects = $('select');
//品牌
var make = selects.eq(0);
//车型
var model = selects.eq(1);
//车款
var car = selects.eq(2);
//1.遍历生成品牌列表
var html = '';
$.each(make_json,function(i){
//2.将品牌信息拼接成html
html+='<option value="'+this.id+'">'+this.name+'</option>';
})
//3.更新品牌列表
make.children(':not(:first)').remove();
make.append(html);
//4.添加品牌change事件
make.change(function(){
//5.获取当前的品牌ID
var id = this.value;
//6. 根据品牌ID获取当前品牌下的车型数据
var modelData = model_json[id] || [] ;
//7.遍历车型 数据生成车型 列表
var html = '';
$.each(modelData,function(i){
//8.将车型信息拼接成html
html+='<option value="'+this.id+'">'+this.name+'</option>';
})
//9.更新车型列表
model.children(':not(:first)').remove();
model.append(html);
//9.1 设置默认被选中车型 获取车型 中的第二个选项
model.children(':eq(1)').attr('selected',true);
//9.2根据当前被选中的车型 获取对应的车款信息
var id = model.val();
//6. 根据车型ID获取当前品牌下的车款数据
var carData = car_json[id] || [] ;
//7.遍历车型 数据生成车型 列表
var html = '';
$.each(carData,function(i){
//8.将车型信息拼接成html
html+='<option value="'+this.id+'">'+this.name+'</option>';
})
//9.更新车型列表
car.children(':not(:first)').remove();
car.append(html);
car.children(':eq(1)').attr('selected',true);
})
//10.车型change事件
model.change(function(){
//11.获取当前的车型ID
var id = this.value;
//6. 根据车型ID获取当前品牌下的车款数据
var carData = car_json[id] || [] ;
//7.遍历车型 数据生成车型 列表
var html = '';
$.each(carData,function(i){
//8.将车型信息拼接成html
html+='<option value="'+this.id+'">'+this.name+'</option>';
})
//9.更新车型列表
car.children(':not(:first)').remove();
car.append(html);
car.children(':eq(1)').attr('selected',true);
})
</script>
</html>