html/css/javascript省市联动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$省市联动$</title>
</head>
<body>
<select name="province"  id="province" >  <!--// province:0 -->
    <option value="0">北京</option>
    <option value="1">河南省</option>
    <option value="2">河北省</option>
    <option value="3">广东省</option>
</select>
<select name="city" id="city">
    //不能提前写好
</select>
<script src="获取元素.js"></script>
<script>
window.onload = function () {
    //1:下拉列表改变  onchange 给你要改变那个列表加
    //2:数据  城市数组
    var str = ''; //空串
    var cities = [['朝阳区','海淀区','大兴区'],['洛阳市','开封市','郑州市'],['张家口市','石家庄市','保定市'],
        ['东莞市','珠海市','深圳市']   ];
    my$('#province').onchange = function () {
        //在改变之后  str清空
        str = '';
        //1:遍历对应的市   ---文字
        /*得到被选中的元素  检测那个元素有selected属性 */
        for(var i =0;i<this.options.length;i++){
            if(this.options[i].selected){
                var index = this.options[i].value
            }
        }
        console.log(index)
        for(var i = 0;i<cities.length;i++){
            if(i == index ){ //?
               var cs =  cities[index]
              /* console.log(cities[index])*/
                //遍历每一个城市 装到option标签里
                for(var j= 0;j<cities[index].length;j++){
                    //拼接字符串
                    str+="<option value="+ j+">"+ cities[index][j]+" </option>"
                }
                console.log(str)
            }
        }

        my$('#city').innerHTML = str;
        //2:option标签
        //3:追加到name=city的下拉列表里       
    }
    //初始化函数
    function init() {
        //创建元素法  createElement('option')
        for(var i =0;i<cities[0].length;i++){
            var o = document.createElement('option')
            o.innerText = cities[0][i];
            my$('#city').appendChild(o)
        }
    }
    init();
}
</script>
</body>
</html>
在这里插入图片描述
html/css/javascript省市联动效果

猜你喜欢
