您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)MVC方式如何實現(xiàn)三級聯(lián)動的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
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 模型 (數(shù)據(jù)) * controller 控制器 * view 視圖 * 下拉事件 由控制器處理 * 獲取數(shù)據(jù) 由模型處理 * 數(shù)據(jù)的顯示 由視圖處理 * 控制器 發(fā)布指令 調(diào)用模型獲取數(shù)據(jù) * * 控制器拿到數(shù)據(jù)后發(fā)布指令將數(shù)據(jù)交給視圖進行顯示 * * * */ //定義一個控制器對象 var ctrl={ //初始化函數(shù) init:function(){ this.createBrand(); }, //品牌函數(shù) createBrand:function(){ //調(diào)用模型獲取數(shù)據(jù) var data=model.getBrand(); //將數(shù)據(jù)交給視圖去渲染(顯示) view.showBrand(data); this.createModel(); this.brandChange(); this.modelChange(); }, //車型函數(shù) createModel:function(){ var id=$('.make').val(); var data=model.getModel(id); view.showModel(data); this.createCar(); }, //車款函數(shù) createCar:function(){ var id=$('.model').val(); var data=model.getCar(id); view.showCar(data); }, //品牌點擊函數(shù) brandChange:function(){ $('.make').change(function(){ ctrl.createModel(); }) }, //車型點擊函數(shù) modelChange:function(){ $('.model').change(function(){ ctrl.createCar(); }) } }; //定義一個模型對象 var model={ //獲取第一個數(shù)據(jù) getBrand:function(){ return car_make; }, //獲取第二個數(shù)據(jù) getModel:function(id){ return car_model[id]; }, //獲取第三個數(shù)據(jù) 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>
最終顯示效果:
感謝各位的閱讀!關(guān)于“MVC方式如何實現(xiàn)三級聯(lián)動”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。