Js省市二级联动

最新推荐文章于 2025-06-19 11:36:06 发布

Jack_num1

最新推荐文章于 2025-06-19 11:36:06 发布

阅读量691

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # Javascript 文章标签：省级二级联动

本文链接：https://blog.youkuaiyun.com/Jack_num1/article/details/77989166

Javascript 专栏收录该内容

4 篇文章

订阅专栏

一、javascript 采用二维数组的方式做了个简单的省市级二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

 function changeCity() {
            var citys=new Array();//创建数组对象
            citys['四川省']=['成都市','绵阳市','广安市'];//创建个二维数组
            citys['重庆市']=['渝北区','江北区','巴南区'];
            citys['北京市']=['海淀区','丰台区','通州区']
            var pIndex=document.getElementById('province').value;//获得省的值
            document.getElementById('city').options.length=1;//
            for(var j in citys[pIndex]){
               var newOption1=new Option(citys[pIndex][j],citys[pIndex]);
                document.getElementById('city').options.add(newOption1);
            }
        }
    </script>
</head>
<body>
<div>
        <div>
            <select name="province" id="province" onchange="changeCity()">
                <option>--------请选择省份-------</option>
                <option value="四川省">四川省</option>
                <option value="重庆市">重庆市</option>
                <option value="北京市">北京市</option>
            </select>
            <select name="city" id="city">
                <option>--------请选择市或者区-------</option>
            </select>
        </div>
</div>
</body>
</html>