Json级联下拉菜单

Question

I'm trying to set up a cascading dropdown using JSON data. I have it working somewhat but need some assistance getting the 2nd tier to work as intended. Currently it seems to be grabbing the number in the array.

Ideally for my 2nd tier I want to show the text in the dropdown as the option text, and I'd like to use the id field in the json as the value of the option.

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"} 
                    ],
                }

I have a jsfiddle showing what I have so far.

Happy to use whatever combination of javascript/jquery works best.

Answer 1

The way you have used for..in seems to be incorrect. The question variable will not contain the entire value if the pointed collection ( data[this.value] , in this case) is not a simple array. Rather, it would contain the index of the first row, the second row and so on. I request you to read this for a more in-depth understanding :

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

This line here

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

Must read this way

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

Here's an updated fiddle after this change has been made:

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

Answer 2

please try this

 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);
                }



        }
}

working fiddle http://jsfiddle.net/tc1f3kup/3/