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

Need concise implementaion of javascript dynamic cascaded select options

本文关键字：简洁 实现 选项 选择 javascript 动态 级联 需要      更新时间：2023-09-26

以下程序可以在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>

这里有几个问题。

一个是对象字面量后面的逗号。把它拿出来:

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

此外，在较旧的浏览器中不会有Object.keys()可用，并且不应该依赖对象中元素的顺序。如果你关心数据的顺序，你应该把数据放在一个数组中。

相关文章：