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. 将第二个下拉列表的值与其实际具有的值进行比较,即 CASTE1CASTE2(就像您在此处发布的代码中所做的那样,但不是在演示中)。

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


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

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