Question

我需要显示三个选择菜单，用于选择州，区和区域。其中第二个选择菜单应根据第一个和第三个动态填充，基于第二个选择菜单。

为此，我在Javascriptsource.com找到了一个并替换了一点以获得以下内容，

    <script>


    var districts = new Array();

    districts['Tamilnadu'] = new Array('Chennai','Coimbatore','Vellore');
    districts['Andhra Pradesh'] = new Array('Hyderabad','Andra 2','Andra 3');

    var cities = new Array();

    areas['Tamilnadu'] = new Array();
    areas['Tamilnadu']['Chennai'] = new Array('Kolathur','Perambur');
    areas['Tamilnadu']['Coimbatore'] = new Array('Combatore 1','Coimbatore 2');
    areas['Tamilnadu']['Vellore'] = new Array('Vellore 1','Vellore 2');

    areas['Andhra Pradesh'] = new Array();
    areas['Andhra Pradesh']['Hyderabad'] = new Array('Hyde 1','Hyde 2');
    areas['Andhra Pradesh']['Andra 2'] = new Array('Andra2 1','Andra2 2');
    areas['Andhra Pradesh']['Andra 3'] = new Array('Andra3 1','Andra3 2');

    function setDistrict() {
    stateSelect = document.getElementById('state');
    districtList = districts[stateSelect.value];
    changeSelect('district', districtList, districtList);
    setArea();
    }

    function setArea() {
    stateSelect = document.getElementById('state');
    districtSelect = document.getElementById('district');
    areaList = areas[stateSelect.value][districtSelect.value];
    changeSelect('area', areaList, areaList);
    }

    function changeSelect(fieldID, newOptions, newValues) {
    selectField = document.getElementById(fieldID);
    selectField.options.length = 0;
     for (i=0; i<newOptions.length; i++) {
     selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
     }
    }

    // The below codes do what?

    function addLoadEvent(func) {
    var oldonload = window.onload;
     if (typeof window.onload != 'function') {
     window.onload = func;
     } else {
     window.onload = function() {
     if (oldonload) {
      oldonload();
     }
    func();
       }
      }
    }

    addLoadEvent(function() {
      setDistrict();
    });


    </script>

它工作正常，但第二个选择菜单的值改变时，第三个选择菜单没有填充。

有什么问题，我也想知道这是否适用于所有主流浏览器？

有没有更好的解决方案呢？并且任何人都可以解释最后一段代码（在评论行之后）实际上做了什么吗？

提前致谢。

[我在stackoverflow和其他地方都在这里搜索答案。但似乎没有什么似乎有助于这种只使用javascript的需求。 ]

[更新]现在正在运作。但它会在所有浏览器上运行吗？任何人都可以向我解释评论行之后的代码吗？

Answer 1

那里有几个问题。

看起来主要问题是您没有在任何地方声明areas;您改为声明cities。
由于未声明其变量，代码也会遇到The Horror of Implicit Globals。
即使在声明其变量时，代码也会使它们成为全局变量。这里没有必要，最好将整个事物包装在一个范围函数中以避免（非常拥挤的）全局命名空间中的冲突。看起来您必须在某个地方的HTML changeSelect属性中使用onXyz，因此我们必须做一些事情才能使其全局化（更好的答案是不使用HTML onXyz属性，但是在代码中的attachEvent元素上使用addEventListener（IE8及更早版本）或select（所有其他代码）（我之前没有尝试过这样做，我刚才{ {1}}全球）。
您提出的代码＆＃34;以下代码[原文如此]做了什么？＆＃34;正在等待调用changeSelect，直到HTML定义的setDistrict元素存在之后。但该代码非常已过时。在20世纪90年代中期，如果您想在页面加载完成后运行某个功能，则将其分配到select或将其作为window.onload放在开始的<body>标记中。只有一个，如果你再次这样做，它会删除第一个。因此，代码尝试以查看是否已存在，并且如果存在，请将其替换为新的，但也可以调用它。

幸运的是，在90年代后期，微软在IE 5.5（5.0？）中引入了<body onload="functionName();">，此后不久我们在所有其他浏览器中都有DOM2事件给我们attachEvent，其中两者都是让我们在不删除任何先前处理程序的情况下执行相同的操作。

但是没有必要在这里等待addEventListener window事件，这不是一个好主意，因为直到一切之后它才会开火加载，包括所有图片。相反，我们只需将load元素与此代码放在HTML的最末端，就在结束script标记之前，然后直接调用</body>：
```
setDistrict()
```
此时元素将存在。没有理由等待更长时间（// Just make sure this script is referenced from a `script` element // at the **end** of the HTML, just before the closing `</body>` tag setDistrict();之后很久了。）
window.onload和districts（或某些areas子元素）都不应该是数组。它们根本不作为数组使用，就像对象一样。 area和districts的所有初始化都可以更多更简单。

将所有这些放在一起，并使用一些正确的格式：

areas

旁注：在谈论编程代码时，单词＆＃34; code＆＃34;是一个＆＃34;群众名词＆＃34;喜欢＆＃34; water＆＃34;。它永远不会复数。所以它总是＆＃34;这段代码＆＃34;不是＆＃34;这些代码。＆＃34;

如何基于第一个选择填充第二个选择菜单，如何基于第二个选择填充第三个选择菜单 - 使用Javascript

1 个答案: