需要简洁的javascript动态级联选择选项的实现

时间:2013-04-27 06:23:21

标签: javascript internet-explorer select options

以下程序可以在Windows 7中的Chrome,Firefox,Safari上运行,但不能在IE上运行。如何改进并保持简洁?

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>选择地区</title>
  </head>
  <body>
    <form id="area">
      <select id="selectProvince" onchange="setCities()"></select>
      <select id="selectCity"></select>
    </form>
  </body>
  <script>
    var province_cities_map = {
        北京: ['东城','西城'],
        上海: ['黄浦','卢湾'],
    };
    function setProvinces() {
      provinces = Object.keys(province_cities_map);
      selectProvince.length = 0;
      for (i = 0; i < provinces.length; i++) selectProvince.options[i] = new Option(provinces[i]);
      setCities();
    }
    function setCities() {
      cities = province_cities_map[selectProvince.value];
      selectCity.length = 0;
      for (j = 0; j < cities.length; j++) selectCity.options[j] = new Option(cities[j]);
    }
    setProvinces();
  </script>
</html>

1 个答案:

答案 0 :(得分:0)

这里有一些问题。

一个是对象文字中的尾随逗号。拿出来:

var province_cities_map = {
    北京: ['东城','西城'],
    上海: ['黄浦','卢湾']
};

此外,旧版浏览器中不会提供Object.keys(),并且您不应指望对象中元素的顺序。如果您关心订单,则应将数据放入数组中。