0

大家好，我只是 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/

4

2 回答 2

1

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

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

这是一个更新的小提琴。

正如 Felix 指出的那样，我的建议不是您的主要问题。另一个问题是您没有正确使用javascript对象类型：

错误的：

var data = {};
data = meh;

在这种情况下meh，它不是一个有效的标识符，因为它没有被定义为一个变量，也不是一个公认的标识符。

正确的： 

data = {
    myString: 'hello',
    myArray: []
};
于 2013-07-19T07:20:37.477 回答
1

您的 jsFiddle 演示不起作用，因为

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

  2. 您正在dataType与不同的字符串进行比较CASTE1or CASTE2，任何if条件都不会成立，

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

要解决这个问题，你必须

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

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

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

如果你学会了如何调试JavaScript，这些事情中的大部分都很容易解决。

于 2013-07-19T07:32:41.087 回答