這里我們是將所有的省市區放在一個js文件當中，我們將他打印到打印台方便觀看
第一層數組包對象的形式 ，通過第一層我們可以獲取到省
第二層是對象包數組，通過數組children我們可以的到市
第三層同樣也是對象包數組的形式，可以得到區
首先建立三個下拉列表框
<select id="sheng"></select> <select id="shi"></select> <select id="qu"></select>
分別獲取他們的對象
<script> console.log(data) // 通過id分別獲取省市區下拉列表的對象 var sheng=document.getElementById("sheng"); var shi=document.getElementById("shi"); var qu=document.getElementById("qu");
這里我們首先要區別innerHTML的屬性和innertext的屬性是不同的
inneHTML瀏覽器是可以解析整個HTML片段的；
innertext瀏覽器是不會解析的傳入的只是文本，字符串的形式；
實例：
<body>
<ul id="ul">
<li>語文</li>
<li>數學</li>
<li>英語</li>
</ul>
<script>
var ul=document.getElementById("ul");
console.log(ul.innerHTML);
console.log(ul.innerText);
</script>
</body>
省：通過循環遍歷，將每一個省的name添加到建立的空字符串中
然后利用innerHTML瀏覽器會解析整個html片段的屬性，將整個字符串添加進去。
得到省的下拉列表框
var sheng_str="";/*定義一個空字符串*/ for(i=0;i<data.length;i++){/*將省的列表循環添加到空字符串中*/ sheng_str+="<option>"+data[i].name+"</option>"/*字符串拼接*/ } sheng.innerHTML=sheng_str;
效果圖：
市：使用onchange事件當省的下拉列表值改變時讓市變化到對應的部分
var shi_index;/*全局變量方便后面使用*/ sheng.onchange=function(){ qu.innerHTML="";/*清空區的下拉列表*/ shi_index=sheng.selectedIndex;/*獲取市對應的索引*/ var shi_str=""; var shi_data=data[shi_index].children/*存放市的數組*/ for(i=0;i<shi_data.length;i++){ shi_str+="<option>"+shi_data[i].name+"</option>" } shi.innerHTML=shi_str; }
區：同樣使用onchange事件市發生改變時讓區變化到對應的部分
shi.onchange=function(){ var qu_index=shi.selectedIndex;/*獲取區對應的索引*/ var qu_str=""; var qu_data=data[shi_index].children[qu_index].children;/*存放區的數組*/ for(i=0;i<qu_data.length;i++){ qu_str+="<option>"+qu_data[i].name+"</option>" } qu.innerHTML=qu_str; } </script>
