<!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">
/**
* 1. 更新车型 根据品牌ID
* 2. 更新车款 根据车型ID
* 3..更新数据 根据上一级ID
*
* 根据ID可以获取对应的数据
* 遍历数据生成html代码
* 根据HTML更新内容
* 设置默认被选中的元素
*
* mvc
* model 模型 数据模型 数据
* view 视图 html代码 能看见的 以什么方式显示
* controller 控制器 逻辑部分 、应该做什么、准备做什么、什么事件触发 什么功能。。。。
*
* 控制器-》发命令给 模型，让模型返回数据-》控制器得到数据 -》控制器将数据交给视图显示
*
*
*/
(function($){
//0.定义三个对象 分别是控制器、模型、视图
var ctrl = {
init:function(){
console.log('初始化');
this.create_brand();
this.brand_change();
this.model_change();
},
//创建品牌列表
create_brand:function(){
//调用模型方法获取品牌数据
var data = model.get_brand();
// 将数据交给视图，让视图来显示
view.show_brand(data);
},
//创建车型列表
create_model:function(){
//获取ID
var id = $('select:first').val();
//调用模型根据ID获取对应的车型数据
var data = model.get_model(id);
//将数据交给视图让其显示
view.show_model(data);
//车型创建完之后立即创建车款
ctrl.create_car();
},
create_car:function(){
//获取ID
var id = $('select:eq(1)').val();
//调用模型根据ID获取对应的车型数据
var data = model.get_car(id);
//将数据交给视图让其显示
view.show_car(data);
},
//品牌切换事件
brand_change:function(){
var self = this;
//品牌变化事件
$('select:first').change(function(){
self.create_model()
})
},
//车型切换事件
model_change:function(){
var self = this;
//品牌变化事件
$('select:eq(1)').change(function(){
self.create_car()
})
}
};
var model = {
//获取品牌数据
get_brand:function(){
return make_json
},
//获取车型数据
get_model:function(id){
return model_json[id]
},
//获取车款数据
get_car:function(id){
return car_json[id]
}
};
var view = {
// 根据数据及选择器 创建html代码并更新到对应的元素上
create_options:function(data,selector){
//1.遍历生成html代码
var html = '';
$.each(data, function() {
html+='<option value="'+this.id+'">'+this.name+'</option>'
});
$(selector).html(html)
},
//根据品牌数据显示品牌列表
show_brand:function(data){
this.create_options(data,'select:first');
},
//根据车型数据显示车型列表
show_model:function(data){
this.create_options(data,'select:eq(1)');
},
//根据车款数据显示车款列表
show_car:function(data){
this.create_options(data,'select:last');
}
};
//1.执行初始化
ctrl.init();
})(jQuery);
</script>
</html>