js城市二级连动

最新推荐文章于 2022-10-09 22:30:06 发布

Jason_XGG

最新推荐文章于 2022-10-09 22:30:06 发布

阅读量256

点赞数 1

本文链接：https://blog.csdn.net/Jason_XGG/article/details/77989981

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body  οnlοad="init()">
省
<select id="province" size=1 οnchange="getCity()">
    <option value= 0 >北京</option>
    <option value= 1 >重庆</option>
    <option value= 2 >云南</option>
    <option value= 3 >四川</option>

    </select>
市
<select id="city"></select>
<script type="text/javascript">
    var arr=new Array();
    arr[0]="东城,西城,崇文,宣武,朝阳,"
    arr[1]="万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,"
    arr[2]="昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江"
    arr[3]="成都,绵阳,广安,巴中"

    function init()
    {
        var city = document.getElementById("city");
        var cityArr = arr[0].split(",");
        for(var i=0;i<cityArr.length;i++)
        {
            city[i]=new Option(cityArr[i],cityArr[i]);
        }
    }

    function getCity()
    {
        var pro = document.getElementById("province");
        var city = document.getElementById("city");
        var index = pro.selectedIndex;
        var cityArr = arr[index].split(",");

        city.length = 0;
        //将城市数组中的值填充到城市下拉框中
        for(var i=0;i<cityArr.length;i++)
        {
            city[i]=new Option(cityArr[i],cityArr[i]);
        }
    }
</script>


    </body>
</html>

Jason_XGG

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js城市二级连动

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>body onload="init()">省select id="province" size=1 onchange="getCity()"> option value= 0 >北京option> option v
复制链接

扫一扫