基于MVC方式实现三级联动（JavaScript）

本文实例为大家分享了基于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>

最终显示效果：

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