1. 程式人生 > >html二級聯動學習筆記

html二級聯動學習筆記

泉州 body i++ 得到 alert onchange chang html reat

<head>
<meta charset="UTF-8">
<title></title>
<script>
/
準備工作 : 準備數據
/
var provinces = [
["深圳市","東莞市","惠州市","廣州市"],
["長沙市","嶽陽市","株洲市","湘潭市"],
["廈門市","福州市","漳州市","泉州市"]
];
/*

  1. 確定事件: onchange
  2. 函數: selectProvince()
  3. 函數裏面要搞事情了
    得到當前操作元素
    得到當前選中的是那一個省份
    從數組中取出對應的城市信息

                動態創建城市元素節點
                添加到城市select中
    
        */
        function selectProvince(){
            var province = document.getElementById("province");
            //得到當前選中的是哪個省份
            //alert(province.value);
            var value = province.value;
            //從數組中取出對應的城市信息
            var cities = provinces[value];
            var citySelect = document.getElementById("city");
            //清空select中的option
            citySelect.options.length = 0;
    
            for (var i=0; i < cities.length; i++) {

    // alert(cities[i]);
    var cityText = cities[i];
    //動態創建城市元素節點 <option>東莞市</option>

                //創建option節點
                var option1 = document.createElement("option"); // <option></option>
                //創建城市文本節點
                var textNode = document.createTextNode(cityText) ;// 東莞市
    
                //將option節點和文本內容關聯起來
                option1.appendChild(textNode);  //<option>東莞市</option>

// 添加到城市select中
citySelect.appendChild(option1);
}

        }

    </script>
</head>
<body>
    <!--選擇省份-->
    <select onchange="selectProvince()" id="province">
        <option value="-1">--請選擇--</option>
        <option value="0">廣東省</option>
        <option value="1">湖南省</option>
        <option value="2">福建省</option>
    </select>
    <!--選擇城市-->
    <select id="city"></select>
</body>

</html>

html二級聯動學習筆記