Jquery每个循环通过嵌套的json

Question

我正在尝试使用简单的Json文件并调用多个选择框。我有一个静态选择框，如下所示：

<select>
<option value="first">This is the first</option>
<option value="second">This is the second</option>
<option value="third">This is the third</option>
<option value="fourth">This is the fourth</option>
<option value="fifth">This is the fifth</option>
</select>

这决定了输出是什么 - 我正在使用像这样的JSON文件。

{
    "first": [
        {
            "london": [
                {
                    "id": "london",
                    "name": "London UK",
                    "london": [
                        {
                            "id": "london",
                            "name": "London UK"
                        },
                        {
                            "id": "secondLondon",
                            "name": "Second London"
                        }
                    ]
                }
            ]
        }
    ],
    "second": [
        {
            ...
        }
    ]
}

现在，当在选择框中点击first时，它会返回id = london或name = London UK。

$("#form").on('change', function() {
     $("select#preferred_study_location").html('');
        var things = options[$(this).val()];
        var thingstring = '';
        $.each(things, function(i, item) {
          console.log(things[i]);
        });
    $('#preferred_study_location').html(thingstring);
});

Answer 1

尝试

HTML

<form id="form">
<select>
    <option>select</option>
<option value="first" data-value="london">This is the first</option>
<option value="second" data-value="wales">This is the second</option>
<option value="third" data-value="surrey">This is the third</option>
<option value="fourth" data-value="newcastle">This is the fourth</option>
<option value="fifth" data-value="liverpool">This is the fifth</option>
</select>
    <output for="form" id="preferred_study_location"></output>
</form>

JS

$("#form").on("change", function(e) {
        var output = $("[for=form]", this)
        , val = e.target.value
        , data = $("[value=" + val + "]", this).data("value")
        , things = options[val]
        , thingstring = "";
        output.html("");
        $.each(things, function(i, item) {
            console.log(things[i][data][i]);
            thingstring = things[i][data][i].name;
        });
        output.html(thingstring);
});

＆＃13;

＆＃13;

var options = {
    "first": [
        {
            "london": [
                {
                    "id": "london",
                    "name": "London UK",
                    "london": [
                        {
                            "id": "london",
                            "name": "London UK"
                        },
                        {
                            "id": "secondLondon",
                            "name": "Second London"
                        }
                    ]
                }
            ]
        }
    ],
        "second": [
        {
            "wales": [
                {
                    "id": "wales",
                    "name": "Wales UK",
                    "wales": [
                        {
                            "id": "wales",
                            "name": "Wales UK"
                        },
                        {
                            "id": "secondWales",
                            "name": "Second Wales"
                        }
                    ]
                }
            ]
        }
    ],
        "third": [
        {
            "surrey": [
                {
                    "id": "surrey",
                    "name": "Surrey UK",
                    "surrey": [
                        {
                            "id": "surrey",
                            "name": "Surrey UK"
                        },
                        {
                            "id": "secondSurrey",
                            "name": "Second Surrey"
                        }
                    ]
                }
            ]
        }
    ],
        "fourth": [
        {
            "newcastle": [
                {
                    "id": "newcastle",
                    "name": "Newcastle UK",
                    "newcastle": [
                        {
                            "id": "newcastle",
                            "name": "Newcastle UK"
                        },
                        {
                            "id": "secondNewcastle",
                            "name": "Second Newcastle"
                        }
                    ]
                }
            ]
        }
    ],
        "fifth": [
        {
            "liverpool": [
                {
                    "id": "liverpool",
                    "name": "Liverpool UK",
                    "liverpool": [
                        {
                            "id": "liverpool",
                            "name": "Liverpool UK"
                        },
                        {
                            "id": "secondLiverpool",
                            "name": "Second Liverpool"
                        }
                    ]
                }
            ]
        }
    ]
};
$("#form").on("change", function(e) {
        var output = $("[for=form]", this)
        , val = e.target.value
        , data = $("[value=" + val + "]", this).data("value")
        , things = options[val]
        , thingstring = "";
        output.html("");
        $.each(things, function(i, item) {
            console.log(things[i][data][i]);
            thingstring = things[i][data][i].name;
        });
    output.html(thingstring);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form">
<select>
    <option>select</option>
<option value="first" data-value="london">This is the first</option>
<option value="second" data-value="wales">This is the second</option>
<option value="third" data-value="surrey">This is the third</option>
<option value="fourth" data-value="newcastle">This is the fourth</option>
<option value="fifth" data-value="liverpool">This is the fifth</option>
</select>
    <output for="form" id="preferred_study_location"></output>
</form>

＆＃13;

＆＃13;

＆＃13;