码迷,mamicode.com
首页 > 其他好文 > 详细

省市县联动(转)

时间:2014-07-23 18:03:45      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:style   http   java   color   数据   io   

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    //示例数据,数据的不同,获取数据的方法是不同的
      var data = { "浙江省": { "湖州市": ["德清县","长兴县","安吉县","吴兴区","南浔区"], "杭州市": ["上城区", "下城区", "西湖区"] },
                   "河南省": {"洛阳市":["孟津县","新安县","栾川县"],"新乡市":["新乡县","获嘉县","长垣县","封丘县"],"周口市":["鹿邑县","太康县","郸城县","淮阳县"]},
                   "北京市": {"北京市":["昌平区","海淀区","怀柔县","延庆县"]}
                      };

    window.onload = function () {
      //填充省数据
      for (p in data) {
        var sheng = document.getElementById("province");
        sheng.options[sheng.options.length] = new Option(p, p);
      }
      setCity()
    }

    function setCity()
    {
      var sheng = document.getElementById("province");
      var shi = document.getElementById("city");
      shi.options.length = 0;
      var selected_sheng = sheng.options[sheng.selectedIndex].value;
      for (c in data[selected_sheng]) {
       
        shi.options[shi.options.length] = new Option(c, c);
      }
      setCountry()
    }
    function setCountry() {
      var sheng = document.getElementById("province");
      var shi = document.getElementById("city");
      var xian = document.getElementById("country");
      var selected_sheng = sheng.options[sheng.selectedIndex].value;
      var selected_shi = shi.options[shi.selectedIndex].value;
      var xianArray = data[selected_sheng][selected_shi];
      xian.options.length = 0;
      for (i = 0; i < xianArray.length;i++ ) {
        xian.options[xian.options.length] = new Option(xianArray[i], xianArray[i]);
      }
    }
    </script>
</head>
<body>
    <form>
    选择省:<select id="province" onchange="setCity()"></select>
    选择市:<select id="city" onchange="setCountry()"></select>
    选择区县:<select id="country"></select>
    </form>
</body>
</html>

省市县联动(转),布布扣,bubuko.com

省市县联动(转)

标签:style   http   java   color   数据   io   

原文地址:http://www.cnblogs.com/yongwuqing/p/3863607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!