js省市級聯實現
阿新 • • 發佈：2017-10-15
提示 scrip round ros temp rop sel 菜單 武漢
js省市級聯實現。
for [element] in [collection] 用於循環下標,常用於json for(index in arr){ console.info("下標："+index+"值："+arr[index]); } =====================分割線======================== <html> <head> <meta charset="UTF-8"> <title>基於JSON級聯列表</title> <script type="text/javascript">//JSON:主要用於數據交換，其次json就是有格式的字符串 //var str = "{‘name‘:‘demo‘,‘age‘:‘18‘}"; //這樣寫符合JSON語法（字符串用雙引號） var str = ‘{"name":"demo","age":"18"}‘; console.info("當前類型為："+typeof(str)); var obj = JSON.parse(str); console.info("當前類型為："+typeof(obj)); //JSON輸出訪問的兩種方式 console.info(obj.name+","+obj.age+"||"+obj[‘name‘]+","+obj[‘age‘]); str=JSON.stringify(obj); console.info("當前類型為："+typeof(str)); //采用JSON格式來存儲相應的數據和編碼 var proJSON = {"1":"廣東省"，"2":"湖北省"}; var cityJSON = {"1":{"020":"廣州","0755":"深圳","0756","珠海"},"2":{"027":"武漢","0710":"襄樊","0715":"赤壁"}} window.onload=function(){ var province = document.getElementById("province"); for(var temp in proJSOM){ province.add(new Option(proJSON[temp],temp)); } } function setCity(){ //只要觸發了此事件，則二級菜單必須還原 var city=document.getElementById(‘city‘); city.Option.length=1; //獲取被選中省會的值 var val = document.getElementById(‘province‘).value; console.info("cityJSON:"+cityJSON[val]); if(!cityJSON[val]){ return; } //通過選中的值獲取二級菜單的json數據 var sonJSON=cityJSON[val]; for(temp in sonJSON){ city.add(new Option(sonJSON[temp],temp)) } } </script> </head> <body> <!--數據的三種存儲方式： 1：數據庫 2：properties:存儲非敏感數據，且key value 格式，省資源 3：XML：存儲非敏感數據，且支持有結構 目前一般用於配置文件 4：硬編碼：主要存儲非敏感數據，且不改變的數據 --> <select id="province" onChange="setCity()"> <option>--選擇省會--</option> </select> <select id="city" > <option>--選擇城市--</option> </select> </body> </html> =====================分割線======================== <html> <head> <meta charset="UTF-8"> <title>基於數組級聯列表</title> <script type="text/javascript"> //js中數組的下標支持中文 var arr = new Array(); arr[‘廣東省‘] = [‘廣州‘,‘深圳‘,‘珠海‘]; arr[‘湖北省‘] = [‘武漢‘,‘襄樊‘,‘赤壁‘]; window.onload=function(){ //向省會賦值下拉列表框 var proSel = document.getElementById("province"); for(var temp in arr){ proSel.add(new Option(temp,temp)) } } function setCity(){ //清空當前下拉列表框的信息 var citySel = document.getElementById("city"); citySel.options.length=1; //獲取選中的省會信息 var pro = document.getElementById(‘province‘).value; //如果選擇獲取提示信息則不執行 if(pro == ""){ return; } var citySel = document.getElementById(‘city‘); for(var i=0;i<arr[pro].length;i++){ citySel.add(new Option(arr[pro][i],arr[pro][i])) } } </script> </head> <body> <select id="province" onChange="setCity()"> <option>--選擇省會--</option> </select> <select id="city" > <option>--選擇城市--</option> </select> </body> </html>
js省市級聯實現