js实现二级联动


<html>
<head>
<meta charset="UTF-8">
<title>jstest2title>
<script type="text/javascript">
    window.onload = function() {
        var ele1 = document.getElementById("provice");
        ele1.onchange = function() {
            var city = document.getElementById("city");
            var cityoptins = city.getElementsByTagName("option");
            for (var i = 1; i < cityoptins.length; i++) {
                city.removeChild(cityoptins[i]);
                i--;
            }
            city.childNodes = "";
            var provice = this.value;
            if (provice == "") {
                return;
            }
            var arr = [ [ "山西省", "忻州", "太原", "吕梁" ],
                    [ "山东省", "青岛", "烟台", "潍坊" ], [ "河北省", "秦皇岛", "石家庄", "张家口" ] ];
            for (var i = 0; i < arr.length; i++) {
                for (var j = 1; j < arr[i].length; j++) {
                    if (provice == arr[i][0]) {
                        var cityText = arr[i][j];
                        var cityTextNode = document.createTextNode(cityText);
                        var optionNode = document.createElement("option");
                        optionNode.appendChild(cityTextNode);
                        city.appendChild(optionNode);
                    }
                }
            }
        }
    }
script>
head>
<body>
    内容介绍:在第一个下拉列表选择省份,点击第二个列表出现对应省份的城市
    <br />
    <select id="provice">
        <option>请选择。。option>
        <option value="山西省">山西省option>
        <option value="山东省">山东省option>
        <option value="河北省">河北省option>
    select>
    <select id="city">
        <option>请选择。。option>
    select>
body>
html>

你可能感兴趣的:(javascript)