select下拉選單級聯效果例項程式碼
級聯下拉選單在網頁製作中使用非常的廣泛,例如省市縣級聯熊級聯效果,還是出生年月日級聯效果,非常的人性化,省去使用者很多麻煩,下面就通過一段程式碼例項簡單介紹一下如何實現此效果。
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var groups=document.myform.domain.options.length var group=new Array(groups) for(i=0;i<groups;i++) { group[i] = new Array() } //江岸 group[1][0]=new Option('不限','0'); group[1][1]=new Option('堤角諶家磯','17'); group[1][2]=new Option('二七','18'); group[1][3]=new Option('後湖','19'); group[1][4]=new Option('蔡家田花橋','20'); group[1][5]=new Option('永清黃浦','21'); group[1][6]=new Option('三陽路','22'); group[1][7]=new Option('臺北路香港路','23'); group[1][8]=new Option('江漢路大智路','24'); group[1][9]=new Option('其他','25'); //江漢 group[2][0]=new Option('不限','0'); group[2][1]=new Option('楊汊湖','26'); group[2][2]=new Option('復興村常青','27'); group[2][3]=new Option('唐家墩','28'); group[2][4]=new Option('王家墩CBD','29'); group[2][5]=new Option('西北湖','30'); group[2][6]=new Option('武廣萬鬆園','31'); group[2][7]=new Option('前進花樓','32'); group[2][8]=new Option('其他','33'); //橋口 group[3][0]=new Option('不限','0'); group[3][1]=new Option('武勝路','34'); group[3][2]=new Option('寶丰','35'); group[3][3]=new Option('宗關','36'); group[3][4]=new Option('漢西','37'); group[3][5]=new Option('古田','38'); group[3][6]=new Option('其他','39'); //東西湖 group[4][0] = new Option('不限', '0'); group[4][1] = new Option('常青花園', '40'); group[4][2] = new Option('金銀湖', '41'); group[4][3] = new Option('吳家山', '42'); group[4][4] = new Option('金銀潭將軍路', '43'); group[4][5] = new Option('其他', '44'); //漢陽 group[5][0] = new Option('不限', '0'); group[5][1] = new Option('鸚鵡大道鍾家村', '52'); group[5][2] = new Option('王家灣七裡廟', '53'); group[5][3] = new Option('四新', '54'); group[5][4] = new Option('黃金口琴斷口', '55'); group[5][5] = new Option('其他', '56'); //武漢經開 group[6][0] = new Option('不限', '0'); group[6][1] = new Option('沌口片', '57'); group[6][2] = new Option('其他', '58'); //武昌 group[7][0] = new Option('不限', '0'); group[7][1] = new Option('徐東', '62'); group[7][2] = new Option('岳家嘴', '63'); group[7][3] = new Option('水果湖', '64'); group[7][4] = new Option('積玉橋', '65'); group[7][5] = new Option('中南丁字橋', '66'); group[7][6] = new Option('小東門', '67'); group[7][7] = new Option('司門口', '68'); group[7][8] = new Option('閱馬場首義', '69'); group[7][9] = new Option('武泰閘', '70'); group[7][10] = new Option('南湖花園', '71'); group[7][11] = new Option('其他', '72'); //青山 group[8][0] = new Option('不限', '0'); group[8][1] = new Option('建二', '73'); group[8][2] = new Option('紅鋼城', '74'); group[8][3] = new Option('其他', '75'); //洪山 group[9][0] = new Option('不限', '0'); group[9][1] = new Option('珞獅街道口', '76'); group[9][2] = new Option('卓刀泉虎泉', '77'); group[9][3] = new Option('南湖', '78'); group[9][4] = new Option('白沙洲', '79'); group[9][5] = new Option('黃家湖', '80'); group[9][6] = new Option('楊春湖', '81'); group[9][7] = new Option('其他', '82'); //東湖高新 group[10][0] = new Option('不限', '0'); group[10][1] = new Option('魯巷', '88'); group[10][2] = new Option('關山', '89'); group[10][3] = new Option('大學科技園', '90'); group[10][4] = new Option('藏龍島', '91'); group[10][5] = new Option('花山', '92'); group[10][6] = new Option('其他', '93'); //江夏 group[11][0] = new Option('不限', '0'); group[11][1] = new Option('流芳', '83'); group[11][2] = new Option('紙坊', '84'); group[11][3] = new Option('廟山', '85'); group[11][4] = new Option('大橋', '86'); group[11][5] = new Option('其他', '87'); //黃陂 group[12][0] = new Option('不限', '0'); group[12][1] = new Option('前川', '45'); group[12][2] = new Option('盤龍城', '46'); group[12][3] = new Option('武湖', '47'); group[12][4] = new Option('其他', '48'); //新洲 group[13][0] = new Option('不限', '0'); group[13][1] = new Option('新洲城區', '49'); group[13][2] = new Option('陽邏', '50'); group[13][3] = new Option('其他', '51'); //蔡甸 group[14][0] = new Option('不限', '0'); group[14][1] = new Option('蔡甸', '59'); group[14][2] = new Option('其他', '60'); //漢南 group[15][0] = new Option('漢南', '61'); //其他 group[16][0] = new Option('其他區域', '94'); var temp=document.myform.pian function redirect(x) { for(m=temp.options.length-1;m>0;m--) { temp.options[m]=null } for(i=0;i<group[x].length;i++) { temp.options[i]=new Option(group[x][i].text,group[x][i].value) } temp.options[0].selected=true } document.myform.domain.onchange=function(){ redirect(this.options.selectedIndex) } } </script> </head> <body> <FORM name="myform" id="myform" action="" method="post"> <tr> <td> <select id="domainNewHouse" name="domain"> <option value="0" selected>區域</option> <option value="1">江岸區</option> <option value="2">江漢區</option> <option value="3">礄口區</option> <option value="4">東西湖區</option> <option value="7">漢陽區</option> <option value="8">武漢經開</option> <option value="11">武昌區</option> <option value="12">青山區</option> <option value="13">洪山區</option> <option value="15">東湖高新區</option> <option value="14">江夏區</option> <option value="5">黃陂區</option> <option value="6">新洲區</option> <option value="9">蔡甸區</option> <option value="10">漢南區</option> <option value="16">其他</option> </select> </td> <td> <select name="pian" id="pianqu" style="width:80px;"> <option value="" selected>片區</option> </select> </td> </tr> </form> </body> </html>
以上程式碼實現了我們想要的功能,選擇第一個select下拉選單,第二個會實現聯動效果,下面介紹一下實現過程。
一.實現原理:
程式碼看著很長其實原理非常的簡單,就是將每一個一級地區下的所有二級地區作為一個陣列,然後再將這樣的陣列作為一個length屬性值為一級地區個數的陣列(在此程式碼中是group)的元素,這樣一級地區就和二級地區建立了聯絡。當選擇第一個select下拉選單的時候就會觸發onchange事件,此事件的事件處理函式會傳遞一個引數,此引數作為group陣列的索引,這樣就可以二級地區了,然後通過遍歷的方式將二級地區寫入第二個select下拉選單即可。原理大體如此,這裡就不多介紹了,自己可以深入體會一下。
相關文章
- select下拉選單多級級聯效果程式碼例項
- select級聯下拉選單程式碼例項分析
- select下拉選單項互換效果程式碼例項
- select下拉選單美化程式碼例項
- jQuery美化select下拉選單程式碼例項jQuery
- jQuery操作select下拉選單程式碼例項jQuery
- 模擬select下拉選單程式碼例項
- javascript刪除select下拉選單項程式碼例項JavaScript
- 原生javascript操作select下拉選單程式碼例項JavaScript
- 模擬美化select下拉選單程式碼例項
- css二級下拉選單程式碼例項CSS
- select下拉選單實現分類級聯效果
- 純CSS實現的二級下拉選單效果程式碼例項CSS
- 模擬實現select下拉選單例項程式碼單例
- select下拉選單跳轉效果程式碼
- 動態生成select三級聯動選單程式碼例項
- 刪除和新增select下拉選單option項程式碼例項
- js模擬實現select下拉選單程式碼例項JS
- javascript新增和刪除select下拉選單option項程式碼例項JavaScript
- select下拉選單二級聯動
- css三級下拉導航選單程式碼例項CSS
- jQuery 省市級聯選單程式碼例項jQuery
- js省市級聯選單程式碼例項JS
- 替換預設select下拉選單箭頭程式碼例項
- Android實現三級聯動下拉框 下拉選單spinner的例項程式碼Android
- CSS3實現的美觀多級下拉選單效果程式碼例項CSSS3
- javascript設定select下拉選單readonly只讀程式碼例項JavaScript
- 選中select下拉選單option項實現提交效果
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- JavaScript多級選項卡效果程式碼例項JavaScript
- jquery新增或者刪除select下拉選單項程式碼jQuery
- 滑鼠懸浮出現下拉選單程式碼例項
- css水平下拉導航選單程式碼例項CSS
- jQuery操作select下拉選單程式碼jQuery
- jQuery select下拉選單復位效果jQuery
- js自定義select下拉選單效果JS
- 選中select下拉選單項提交表單
- jQuery操作select下拉選單常用程式碼jQuery