js例子-二級聯動

weixin_34162695發表於2017-05-22
JS

<pre>

<!DOCTYPE html>
<html>
  <head>
    <title>二級聯動.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
    //json物件
    // 相當於java當中的map
    /* 
    var json = {"name":"tom","age":18};
    
    //遍歷json物件的鍵
    
    for(var key in json){  
        //alert(key);
        
        alert(key+"==>"+json[key])
    }
     */
    //---------------------------------------------------------

    
        var json = {"河北省":["石家莊","廊坊","滄州"],
            "山西省":["太原","大同","運城"],
            "黑龍江省":["哈爾濱","齊齊哈爾","佳木斯"]};
        // 初始化省的下拉選
        function fun1(){
            //1 獲得省的select物件
            var province = document.getElementById("province");
            //2 遍歷json的所有鍵
            for(var key in json){  
                // 建立一個option
                var option = document.createElement("option");
                option.innerHTML = key; // <option>河北省</option>
                // 將option新增到select中
                province.appendChild(option);
            }
        }
        
        function fun2(){
            //1 獲得市的select物件
            var province = document.getElementById("province");
            var city = document.getElementById("city");
            //2 清空市級下拉選的資料
            city.length =1; 
            //3 獲得使用者選擇的省
            if(province.selectedIndex==0){
            //使用者選擇的是提示選項=>什麼也不做
            return;
            }
            //獲取省的集合
            var options = province.options;
            //獲取選中省的索引province.selectedIndex
            var pName = options[province.selectedIndex].innerHTML;
            //4 從json中根據省獲得 省下的市資料
            var cities = json[pName];
            //5 遍歷市級的陣列
            for(var i = 0 ; i<cities.length;i++){
            var cityName = cities[i];
                //建立市的option
                var option = document.createElement("option");
                option.innerHTML = cityName; 
                // 將option新增到select中
                city.appendChild(option);
            }
        }


    </script>
  </head>
  
  <body onload="fun1();">
    <select id="province" onchange="fun2();" >
        <option>---請選擇省---</option>
    </select>
    <select id="city" >
        <option>---請選擇市---</option>
    </select>

  </body>
</html>

</pre>

相關文章