三級聯動下拉菜單
阿新 • • 發佈：2019-01-22
eve XML sel height div 修改 後臺 html parse
js代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>三級聯動</title> <style> select{ width:150px; height:35px;} </style> </head> <body> <select class="sheng"> <option>請選擇</option> </select> <span>省</span> <select class="shi"> </select> <span>市</span> <select class="qu"> </select> <span>區</span> <script> //獲取到三個選擇列表 var shengSelect =document.querySelector(".sheng"); var shiSelect=document.querySelector(".shi"); var quSelect =document.querySelector(".qu"); var shenglist=[‘廣西壯族自治區‘,‘廣東‘,‘湖北‘]; var shilist=[[‘南寧‘,‘桂林‘,‘柳州‘],[‘廣州‘,‘深圳‘,‘東莞‘],[‘武漢‘,‘荊門‘,‘襄陽‘]]; var qulist=[ [[‘南1區‘,‘南2區‘,‘南3區‘],[‘桂1區‘,‘桂2區‘,‘桂3區‘],[‘柳1區‘,‘柳2區‘,‘柳3區‘]], [[‘廣1區‘,‘廣2區‘,‘廣3區‘],[‘深1區‘,‘深2區‘,‘深3區‘],[‘東1區‘,‘東2區‘]], [[‘武1區‘,‘武2區‘,‘武3區‘],[‘荊1區‘,‘荊2區‘,‘荊3區‘],[‘襄1區‘,‘襄2區‘,‘襄3區‘]] ]; //選擇省的下標 var shengIndex =0; //加載省 for(var i=0;i<shenglist.length;i++){ var shengOption = new Option(shenglist[i]); shengSelect.options.add(shengOption); } //選擇省後加載市 shengSelect.onchange =function(eve){ shengIndex =eve.target.selectedIndex-1; if(shengIndex == -1){ shiSelect.options.length= 0; quSelect.options.length=0; }else{ shiSelect.options.length= 0; quSelect.options.length=0; for(var j=0;j<shilist.length;j++){ var shiOption =new Option(shilist[shengIndex][j]); shiSelect.options.add(shiOption); } //加載市的同時，加載第一個市的全部區 for(var k=0;k<qulist[shengIndex][0].length;k++){ var quOption =new Option(qulist[shengIndex][0][k]); quSelect.options.add(quOption); } } }
//選擇市後加載區 shiSelect.onchange=function(eve){ var shiIndex =eve.target.selectedIndex; quSelect.options.length =0; for(var n =0;n<qulist[shengIndex][shiIndex].length;n++){ var quOption =new Option(qulist[shengIndex][shiIndex][n]); quSelect.options.add(quOption); } } </script> </body> </html>
js寫出來基本樣子就這樣了，下面我們從後臺進行獲取數據將他顯示在頁面裏面
<!doctype html> <html> <head> <meta charset="utf-8"> <title>三級聯動</title> <style> select{ width:150px; height:35px;} </style> </head> <body> <select class="sheng"> <option>請選擇</option> </select> <span>省</span> <select class="shi"> </select> <span>市</span> <select class="qu"> </select> <span>區</span> <script> //獲取到三個選擇列表 var shengSelect =document.querySelector(".sheng"); var shiSelect =document.querySelector(".shi"); var quSelect =document.querySelector(".qu"); //var shenglist=[‘廣西壯族自治區‘,‘廣東‘,‘湖北‘]; //頁面加載完成發送ajax請求，獲取省數據 var shengIndex =0; (function(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange =function(){ if(xhr.readyState==4){ if(xhr.status==200){ shenglist = JSON.parse(xhr.responseText); //加載省 for(var i=0;i<shenglist.length;i++){ var shengOption = new Option(shenglist[i]); shengSelect.options.add(shengOption); } } } } xhr.open(‘get‘,‘selectDemo.php?type=0‘,true); xhr.send(); }()); //點擊省加載市 shengSelect.onchange =function(eve){ shengIndex =eve.target.selectedIndex-1; if(shengIndex== -1){ shiSelect.options.length = 0; quSelect.options.length = 0; }else{ var xhr = new XMLHttpRequest(); xhr.onreadystatechange =function(){ if(xhr.readyState==4){ if(xhr.status==200){ //console.log(JSON.parse(xhr.responseText)); var success = JSON.parse(xhr.responseText); var shilist =success[0]; shiSelect.options.length = 0; for(var j=0;j<shilist.length;j++){ var shiOption = new Option(shilist[j]); shiSelect.options.add(shiOption); } //加載市的同時加載第一個區 var qulist = success[1]; quSelect.options.length =0; for(var n=0;n<qulist.length;n++){ var quOption = new Option(qulist[n]); quSelect.options.add(quOption); } } } } xhr.open(‘get‘,‘selectDemo.php?type=1&sheng=‘+shengIndex,true); xhr.send(); } } //點擊市加載區 shiSelect.onchange =function(eve){ shiIndex =eve.target.selectedIndex; var xhr = new XMLHttpRequest(); xhr.onreadystatechange =function(){ if(xhr.readyState==4){ if(xhr.status==200){ //console.log(JSON.parse(xhr.responseText)); var qulist = JSON.parse(xhr.responseText); //shiSelect.options.length = 0; quSelect.options.length =0; for(var n=0;n<qulist.length;n++){ var quOption = new Option(qulist[n]); quSelect.options.add(quOption); } } } } xhr.open(‘get‘,‘selectDemo.php?type=2&sheng=‘+shengIndex+‘&shi=‘+shiIndex,true); xhr.send(); } </script> </body> </html>
下面是一個簡單的後臺，方便測試
<?php $shengList = [‘廣西壯族自治區‘,‘廣東‘,‘湖北‘]; $shilist=[[‘南寧‘,‘桂林‘,‘柳州‘],[‘廣州‘,‘深圳‘,‘東莞‘],[‘武漢‘,‘荊門‘,‘襄陽‘]]; $qulist=[[[‘南1區‘,‘南2區‘,‘南3區‘],[‘桂1區‘,‘桂2區‘,‘桂3區‘],[‘柳1區‘,‘柳2區‘,‘柳3區‘]], [[‘廣1區‘,‘廣2區‘,‘廣3區‘],[‘深1區‘,‘深2區‘,‘深3區‘],[‘東1區‘,‘東2區‘]], [[‘武1區‘,‘武2區‘,‘武3區‘],[‘荊1區‘,‘荊2區‘,‘荊3區‘],[‘襄1區‘,‘襄2區‘,‘襄3區‘]]]; $type=$_GET[‘type‘]; if($type==0){ echo json_encode($shengList); }elseif($type==1){ $shengInedx=$_GET[‘sheng‘]; $success = [$shilist[$shengInedx],$qulist[$shengInedx][0]]; echo json_encode($success); }else if($type==2){ $shengInedx=$_GET[‘sheng‘]; $shinInedx=$_GET[‘shi‘]; echo json_encode($qulist[$shengInedx][$shinInedx]); } ?>
效果圖：
不過呢，數據這東西還是放在數據庫是比較好的，需要的時候直接從後臺調用出來，然後發給前端進行顯示就好啦，也方便我們進行修改與操作
三級聯動下拉菜單