用js+html5实现二级联动省份下拉菜单

最新推荐文章于 2021-09-01 13:39:57 发布

ClsrToMe

最新推荐文章于 2021-09-01 13:39:57 发布

阅读量4.3k

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/ClsrToMe/article/details/81710200

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级联动省份下拉框</title>

</head>
<body>
    
</body>
</html>

<script>
var provinces = ['请选择城市','湖北省','湖南省'];
var city1 = ['武汉市','荆州市','襄阳市'];
var city2 = ['长沙市','岳阳市','湘潭市'];

//生成有数据的省的下拉框
document.write("<select name='selPro' onchange='showCity(this)'>");
for(var i = 0;i<provinces.length;i++){
    document.write("<option value='"+i+"'>"+provinces[i]+"</option>");        
}
document.write("</select>");

document.write("<select name='selCity'></select>");

function showCity(obj){
    var content = "";
    if(obj.value==1){
        for(var i = 0;i<city1.length;i++){
            content = content + "<option value='"+i+"'>"+city1[i]+"</option>";
        }
    }else{
        for(var i = 0;i<city2.length;i++){
            content = content + "<option value='"+i+"'>"+city2[i]+"</option>";
        }
    }
    
    document.getElementsByName("selCity")[0].innerHTML = content;
}
</script>