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

基于MVC方式实现三级联动(JavaScript)

2017-01-23 08:41 423 查看

本文实例为大家分享了基于MVC三级联动的具体代码,供大家参考,具体内容如下

Html代码:

<div class="box">
<select class="make">
<option>请选择品牌</option>
</select>
<select class="model">
<option>请选择车型</option>
</select>
<select class="car">
<option>请选择车款</option>
</select>
</div>

js代码:

<script src="jquery-1.8.3.min.js"></script>
<script src="car.make.js"></script>
<script src="car.car.js"></script>
<script src="car.model.js"></script>
<script>
//MVC与OOP模式
/*
* mvc编程思想
* model  模型 (数据)
* controller  控制器
* view  视图
* 下拉事件  由控制器处理
* 获取数据  由模型处理
* 数据的显示 由视图处理
* 控制器  发布指令  调用模型获取数据
*
* 控制器拿到数据后发布指令将数据交给视图进行显示
*
*
* */
//定义一个控制器对象
var ctrl={
//初始化函数
init:function(){
this.createBrand();
},
//品牌函数
createBrand:function(){
//调用模型获取数据
var data=model.getBrand();
//将数据交给视图去渲染(显示)
view.showBrand(data);
this.createModel();
this.brandChange();
this.modelChange();
},
//车型函数
createModel:function(){
var id=$('.make').val();
var data=model.getModel(id);
view.showModel(data);
this.createCar();
},
//车款函数
createCar:function(){
var id=$('.model').val();
var data=model.getCar(id);
view.showCar(data);
},
//品牌点击函数
brandChange:function(){
$('.make').change(function(){
ctrl.createModel();
})
},
//车型点击函数
modelChange:function(){
$('.model').change(function(){
ctrl.createCar();
})
}
};
//定义一个模型对象
var model={
//获取第一个数据
getBrand:function(){
return car_make;
},
//获取第二个数据
getModel:function(id){
return car_model[id];
},
//获取第三个数据
getCar:function(id){
return car_car[id];
}
};
//定义一个视图对象
var view={
//下拉列表
createSelect:function(title,data,element){
var html='<option>'+title+'</option>';
$.each(data,function(){
html+='<option value="'+this.id+'">'+this.name+'</option>'
});
element.html(html);
element.children().eq(1).attr('selected',true);
},
//品牌
showBrand:function(data){
this.createSelect('请选择品牌',data,$('.make'));
},
//车型
showModel:function(data){
this.createSelect('请选择车型',data,$('.model'));
},
//车款
showCar:function(data){
this.createSelect('请选择车款',data,$('.car'));
}
};
ctrl.init();
</script>

最终显示效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  MVC 三级联动
相关文章推荐