Question

我正在尝试使用JSON数据设置级联下拉列表。我有点工作，但需要一些帮助，让第二层按预期工作。目前它似乎正在抓住数组中的数字。

理想情况下，对于我的第二层，我想在下拉列表中显示文本作为选项文本，并且我想使用json中的id字段作为选项的值。

var data = {
            "Crime":[
                {"id":"1","text":"Number of police"},
                { "id":"2","text":"Number of crimes"} 
                    ],
            "Health":[
                {"id":"3","text":"Number of doctors"},
                {"id":"4","text":"Number of hospital visits"},
                {"id":"5","text":"Number of nurses"} 
                    ],
                }

我有jsfiddle显示我到目前为止所拥有的内容。

很高兴使用javascript / jquery的任何组合效果最佳。

Answer 1

您使用for..in的方式似乎不正确。如果指向集合（在这种情况下为question）不是简单数组，则data[this.value]变量将不包含整个值。相反，它将包含第一行，第二行的索引，依此类推。我请求您阅读本文以获得更深入的理解：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

这一行

questionSel.options[questionSel.options.length] = new Option(question, question);

必须以这种方式阅读

questionSel.options[questionSel.options.length] = new Option(
                                      data[this.value][question].text, 
                                      data[this.value][question].id);

在进行此项更改后，这里有一个更新的小提琴：

http://jsfiddle.net/tc1f3kup/2/

Answer 2

请试试这个

 var data = {
        "Crime":[
            {"id":"1","text":"Number of police"},
            { "id":"2","text":"Number of crimes"} 
                ],

        "Health":[
            {"id":"3","text":"Number of doctors"},
            {"id":"4","text":"Number of hospital visits"},
            {"id":"5","text":"Number of nurses"} 

                ],

            }
 window.onload = function () {
        var themeSel = document.getElementById("theme"),
        questionSel = document.getElementById("questions");
        for (var theme in data) {
            themeSel.options[themeSel.options.length] = new Option(theme, theme);
        }
        themeSel.onchange = function () {
            questionSel.length = 1; // remove all options bar first
            if (this.selectedIndex < 1) return; // done                 
                for(var i=0;i<data[this.value].length;i++)
                {                        
                    questionSel.options[questionSel.options.length] = new Option(data[this.value][i].text, data[this.value][i].id);
                }



        }
}

工作小提琴 http://jsfiddle.net/tc1f3kup/3/

Json级联下拉列表

2 个答案: