本文实例为大家分享了基于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>
最终显示效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
