JavaScript-事件【二级联动】

JavaScript - 事件 practice2

题目：

<script type="text/javascript">
    window.onload = function(){
        //创建省份和城市数组，备用
        var provinceArr = ["湖南","湖北","广东"];
        var cityArr = ["长沙，株洲，湘潭，益阳，张家界",
            "武汉，宜昌，恩施，黄石","广州，东莞，惠州，深圳"];
        //通过ID获取select标签
        var selProvince = document.getElementById("province");
        var selCity = document.getElementById("city");
        //新建option标签，并添加进select标签中
        for(var i=0;i<provinceArr.length;i++) {
            var opP = document.createElement("option");
            opP.value = i;
            opP.innerHTML = provinceArr[i];
            selProvince.appendChild(opP);
        }
        //添加select标签的事件
        selProvince.onchange = function(){
            //刷新城市下拉列表
            selCity.options.length=1;
            //获取添加事件的select标签当前选择的项（option）的value
            var selIndex = this.value;
            if(selIndex>=0){
                //分割，城市数组
            var cityArrs = cityArr[selIndex].split("，");
                for(var j=0;j<cityArrs.length;j++){
                    var opC = document.createElement("option");

                    opC.value = cityArrs[j];

opC.innerHTML = cityArrs[j]; selCity.appendChild(opC); } } } }</script>

<body>
<h2>选择所在的省份及城市</h2>
省份：&nbsp;&nbsp;<select id="province">
    <option>-请选择省份-</option>
</select>
城市：&nbsp;&nbsp;<select id="city">
    <option>-请选择城市-</option>
</select>
</body>

JavaScript-事件【二级联动】

相关推荐