基于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>
最终显示效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 在ASP.NET MVC中实现一种不同于平常的三级联动、级联方式, 可用于城市、车型选择等多层级联场景
- 对asp.net实现DropDownList、ListBox无刷新三级联动(javascript)的改进
- javascript实现的年月日三级联动
- JavaScript实现省市县三级联动效果~~~
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用。
- asp.net实现DropDownList、ListBox无刷新三级联动(javascript)
- php+javascript实现三级联动(二)
- 省市县三级联动(javascript 实现)
- 两种方式实现省市县三级联动(利用解析文本和json方式)
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用。
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用
- ASP.NET MVC + Jquery 实现Ajax下拉框数据三级联动
- javascript实现全国省市县三级联动
- JavaScript实现DropDownList(Select)三级联动无刷新 (http://blog.csdn.net/itfly8/archive/2007/07/05/1679102.aspx)
- 一个简单的基于注解的 Controller (spring 2.5 annotation 方式实现mvc )
- php+javascript实现三级联动
- 使用javascript解析xml实现省市县三级联动
- 基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
- (转)javascript实现全国省市县三级联动
- ASP.NET MVC + Jquery 实现Ajax下拉框数据三级联动