下拉组合

Question

大家好我只是JavaScript的初学者。我试图创建一个下拉组合。但由于某些原因，这不起作用。

这是html代码：

<select id="MapSelect" onchange="changeChart();">
<option value="developmentRegionMap">Development Region</option>
<option value="ecoMap">Ecological Regions</option>
<option value="world_mill_en">Districts</option>
</select>


<select id="dataSelect" onchange="changeChart();">
<option value="CASTE1">CASTE1</option>
<option value="CASTE2">CASTE2</option>
</select>

这是javascript部分;

    function changeChart() {
    var data={}
    var value = MapSelect.options[MapSelect.selectedIndex].value;
    var dataType = dataSelect.options[dataSelect.selectedIndex].value;

    if (value == "developmentRegionMap" && dataType == "CASTE1") {
            data=CASTE1_Developmental;
            alert("APPLE");
        }
    else if (value == "developmentRegionMap" && dataType == "CASTE2") {
            data=CASTE2_Developmental;
            alert("BALL");

        }

    else if (value == "ecoMap" && dataType == "CASTE1") {
            data=CASTE1_Eco;
            alert("CAT");
        }

    else if (value == "ecoMap" && dataType == "CASTE2") {
            data=CASTE2_Eco;
            alert("DOG");
        }

    else if (value == "world_mill_en" && dataType == "CASTE1") {
            data=CASTE1_Districts;
            alert("ELEPHANT");
        }

    else if (value == "world_mill_en" && dataType == "CASTE2") {
            data=CASTE2_CASTE2;
            alert("HEN");
    }

};

此代码的jsfiddle链接是： http://jsfiddle.net/4yd2F/2/

Answer 1

您需要物理检索要使用的DOM对象：

var mapSelect = document.getElementById('MapSelect');
var dataSelect = document.getElementById('dataSelect');

以下是更新的fiddle。

菲利克斯指出，我建议的不是你的主要问题。另一个问题是您没有正确使用javascript对象类型：

<强>错误：

var data = {};
data = meh;

在这种情况下，meh不是有效的标识符，因为它未被定义为变量，也不是可识别的标识符。

正确：

data = {
    myString: 'hello',
    myArray: []
};

Answer 2

您的jsFiddle演示无效，因为

1. changeChart函数不是全局函数，因此内联事件处理程序无法调用它（控制台显示Uncaught ReferenceError: changeChart is not defined），

2. 您要将dataType与CASTE1或CASTE2不同的字符串进行比较，if条件都不会成立，

3. 您尝试访问的许多变量都不存在（例如Brahmins_Developmental，Chhetri_Developmental）。

要解决此问题，您必须

1. 将函数定义直接放在HTML文档的头部或正文中。在jsFiddle中，您可以通过在设置中选择No wrap - in <xyz>来执行此操作。

2. 将第二个下拉列表的值与它实际具有的值进行比较，即CASTE1和CASTE2（就像您在此处发布的代码中所做的那样，但不是在演示中）。

3. 定义您要使用的变量或不使用它们。

---

如果你learn how to debug JavaScript，大部分内容都很容易解决。