js編寫三級(jí)聯(lián)動(dòng)簡(jiǎn)單案例
剛給學(xué)妹寫了個(gè)簡(jiǎn)單的地區(qū)的三級(jí)聯(lián)動(dòng)簡(jiǎn)單案例,分享給正在學(xué)習(xí)的朋友參考下
<html> <head> <!--導(dǎo)入jquery--> <script type="text/javascript"src="jquery1.7.1.js"></script> </head> <script type="text/javascript"> $(function(){//頁(yè)面加載 loaddata('gj','國(guó)家的請(qǐng)求url','查所有id隨便給反正后臺(tái)不需要','省份','國(guó)家');//查詢所有國(guó)家,并加載到國(guó)家下拉框中 $("#gj").change(function(){//國(guó)家的值改變事件 loaddata('sf','省份的請(qǐng)求url','國(guó)家id','省份');//查詢當(dāng)前國(guó)家下的所有省份,并加載到省份下拉框中 } $("#sf").change(function(){//省份的值改變事件 loaddata('sj','省份的請(qǐng)求url','省份id','市級(jí)');//查詢當(dāng)前省份下的所有市,并加載到市下拉框中 } }); //數(shù)據(jù)加載 function loaddata(eleid,url,id,type){ $.ajax({ type:'get', url:url, data:{id:id}//參數(shù) success:function(data){ if(type=='國(guó)家'){//如果是國(guó)家 $("#"+eleid).html("");//先清空國(guó)家 $("#sf").html("");//再清空省份 $("#sj").html("");//最后清空市 }else if(type=='省份'){//如果是省 $("#"+eleid).html("");//先清空省份 $("#sj").html("");//再后清空市 }else if(type=='市級(jí)'){//如果是市級(jí) $("#"+eleid).html("");//清空市 } $("#"+eleid).append('<option>請(qǐng)選擇</option>'); //需要注意的是如果后臺(tái)傳來(lái)的data數(shù)據(jù)不一致,需先轉(zhuǎn)換再遍歷 for(var i=0;i<data.length;i++){//再加載數(shù)據(jù) $("#"+eleid).append('<option value="'+data.選擇的值+'">'+data.顯示的值+'</option>');//加載數(shù)據(jù) } },error:function(){ //請(qǐng)求出錯(cuò)處理 } }); } </script> <body> <select id="gj"> <option>請(qǐng)選擇</option> </select> <select id="sf"> <option>請(qǐng)選擇</option> </select> <select id="sj"> <option>請(qǐng)選擇</option> </select> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript省市區(qū)三級(jí)聯(lián)動(dòng)菜單效果
- js省市縣三級(jí)聯(lián)動(dòng)效果實(shí)例
- Extjs4.0 ComboBox如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)
- javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例演示
- javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- jquery+json 通用三級(jí)聯(lián)動(dòng)下拉列表
- js實(shí)現(xiàn)一個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)選擇框代碼分享
- JS制作簡(jiǎn)單的三級(jí)聯(lián)動(dòng)
- 省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
相關(guān)文章
簡(jiǎn)單實(shí)用的js調(diào)試logger組件實(shí)現(xiàn)代碼
開發(fā)js組件的時(shí)間調(diào)試總是麻煩的,最常用的就是用alert或者debugger來(lái)測(cè)試js的運(yùn)行狀態(tài)。2010-11-11js?html5獲取input焦點(diǎn)的輸入框并賦值實(shí)例
這篇文章主要為大家介紹了js?html5獲取input焦點(diǎn)的輸入框并賦值實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10get(0).tagName獲得作用標(biāo)簽示例代碼
get(0).tagName可獲得作用標(biāo)簽,下面是它的一個(gè)小應(yīng)用,在學(xué)習(xí)js的朋友可以參考下2014-10-10Javascript實(shí)現(xiàn)DIV滾動(dòng)自動(dòng)滾動(dòng)到底部的代碼
一個(gè)比較特殊的客戶要求,在一個(gè)頁(yè)面用表格顯示數(shù)據(jù),數(shù)據(jù)量不是很多,不希望使用瀏覽器的滾動(dòng)條,只能在Div中滾動(dòng)table中的數(shù)據(jù),但是有個(gè)特殊的要求,就是必須將滾動(dòng)條自動(dòng)滾動(dòng)到底部2012-03-03JavaScript調(diào)試技巧之console.log()詳解
對(duì)于JavaScript程序的調(diào)試,相比于alert(),使用console.log()是一種更好的方式,原因在于:alert()函數(shù)會(huì)阻斷JavaScript程序的執(zhí)行,從而造成副作用;而console.log()僅在控制臺(tái)中打印相關(guān)信息,因此不會(huì)造成類似的顧慮2014-03-03