本文实例为大家分享了基于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>
最终显示效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程(cainiaojc.com)。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。