最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于MVC方式实现三级联动
时间:2017-03-03 编辑:简简单单 来源:一聚教程网
Html代码:
代码如下 | 复制代码 |
|
js代码:
代码如下 | 复制代码 |
//MVC与OOP模式 /* * mvc编程思想 * model 模型 (数据) * controller 控制器 * view 视图 * 下拉事件 由控制器处理 * 获取数据 由模型处理 * 数据的显示 由视图处理 * 控制器 发布指令 调用模型获取数据 * * 控制器拿到数据后发布指令将数据交给视图进行显示 * * * */
//定义一个控制器对象 varctrl={ //初始化函数 init:function(){ this.createBrand(); }, //品牌函数 createBrand:function(){
//调用模型获取数据 vardata=model.getBrand();
//将数据交给视图去渲染(显示) view.showBrand(data);
this.createModel(); this.brandChange(); this.modelChange(); }, //车型函数 createModel:function(){
varid=$('.make').val(); vardata=model.getModel(id); view.showModel(data); this.createCar(); }, //车款函数 createCar:function(){
varid=$('.model').val(); vardata=model.getCar(id); view.showCar(data); }, //品牌点击函数 brandChange:function(){
$('.make').change(function(){ ctrl.createModel(); }) }, //车型点击函数 modelChange:function(){
$('.model').change(function(){ ctrl.createCar(); }) } };
//定义一个模型对象 varmodel={ //获取第一个数据 getBrand:function(){
returncar_make; }, //获取第二个数据 getModel:function(id){
returncar_model[id]; }, //获取第三个数据 getCar:function(id){
returncar_car[id]; } };
//定义一个视图对象 varview={ //下拉列表 createSelect:function(title,data,element){
varhtml=''; $.each(data,function(){
html+='' });
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();
|
最终显示效果:
-
下一个: 原生和jQuery的ajax用法详解
相关文章
- VS2017添加EF的MVC控制器报错解决方法 04-25
- Spring + Spring MVC + Mybatis 高性能web构建教程 04-19
- MVC常用特性使用教程【翻译】 10-31
- 图解MVC,MVP 和 MVVM 的区别 04-21
- 在MVC上引入service Layer是一个很好的方案【荐】 12-18
- NET MVC中 DropDownList的BUG 10-27