省市县级联

最新推荐文章于 2022-12-29 16:58:29 发布

weixin_33895516

最新推荐文章于 2022-12-29 16:58:29 发布

阅读量65

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cwl168/p/3768339.html

版权

<html>

<head>

<title>JS中的级联功能</title>
<script type="text/javascript">
    //初始化省份
    window.onload = function provinceInit()
    {

        var node = document.getElementById("province");
        var provinceArr = ["安徽省","山东省","湖北省"];
        node.options.length = 1;//设置下拉的个数
        var newOption;
        for(var i in provinceArr){
            //option["value值","页面显示值"]
            newOption = new Option(provinceArr[i],provinceArr[i]);
            //node.add(newOption);
            //循环添加到node
            node.options.add(newOption);
        }
    }
    //省份改变的时候,为city下拉赋值
    function provinceChange()
    {
        var node=document.getElementById("city");
        var cityList = new Array();
        cityList["安徽省"] = ["安庆","芜湖","阜阳","马鞍山","亳州","池州","淮南"];
        cityList["山东省"] = ["济南","青岛","淄博","枣庄","东营","烟台","潍坊"];
        cityList["湖北省"] = ["武汉","宜昌","荆州","恩施","黄石","荆门","黄冈"];
        var proValue = document.getElementById("province").value;
        node.options.length = 1;//清空city的下拉
        var newOption;
        //注意这里是cityList[proValue]
        for(var i in cityList[proValue]){
            newOption = new Option(cityList[proValue][i],cityList[proValue][i]);
            //node.options.add(newOption);
            node.add(newOption);
        }
        node.selectedIndex = 0; //让select出现 "请选择城市"
    }
   function cityChange()
   {
        var node=document.getElementById("country");
        var countryList = new Array();
        countryList["安庆"] = ["望江","宿松","太湖","潜山","广安","雅安","眉山"];
        countryList["芜湖"] = ["南陵","无为","繁昌","枣庄","东营","烟台","潍坊"];

        var cityValue = document.getElementById("city").value;
        node.options.length = 1;//清空city的下拉，防止城市已累加的形式下拉
        var newOption;

        for(var i in countryList[cityValue]){
            newOption = new Option(countryList[cityValue][i],countryList[cityValue][i]);

            node.add(newOption); //给县级下拉菜单赋值
        }

   }

</script>
</head>

<body>
<select name="province" id="province" οnchange="provinceChange();">
    <option value="0">--请选择省份--</option>
</select>
<select name="city" id="city" οnchange="cityChange();">
    <option value="0">--请选择城市--</option>
</select>
<select name="country" id="country">
    <option value="0">--请选择县级--</option>
</select>
</body>
</html>

转载于:https://www.cnblogs.com/cwl168/p/3768339.html

weixin_33895516

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
省市县级联

<html><head><title>JS中的级联功能</title><script type="text/javascript"> //初始化省份 window.onload = function provinceInit() { var node = document.getElement...
复制链接

扫一扫