Question

我正在按照本教程使用JSON http://css-tricks.com/dynamic-dropdowns/

填充下拉菜单

我的JSON查询与文章略有不同（我试图从文章创建相同的输出并失败），但是从阅读评论看起来好像我的输出是最佳选择。

MY JSON输出如下：

{"beverages":["Coffee","Coke"],"snacks":["Chips","Cookies"]}

但是下面的代码没有填充下拉菜单。我认为这是由文章的JSON输出略有不同引起的？我还提到了Papa的建议，即从下面的代码中删除分割，因为这现在是多余的

<script type="application/javascript">
$("#first-choice").change(function() {

    var $dropdown = $(this);

    $.getJSON("../../getdata.php?getDropdown=yes&people_no=1", function(data) {

        var key = $dropdown.val();
        var vals = [];

        switch(key) {
            case 'beverages':
                vals = data.beverages;
                break;
            case 'snacks':
                vals = data.snacks;
                break;
            case 'base':
                vals = ['Please choose from above'];
        }

        var $secondChoice = $("#second-choice");
        $secondChoice.empty();
        $.each(vals, function(index, value) {
            $secondChoice("<option>" + value + "</option>");
        });

    });
});
</script>

<select id="first-choice">
    <option selected value="base">Please Select</option>
    <option value="beverages">Beverages</option>
    <option value="snacks">Snacks</option>
</select>

<br />

<select id="second-choice">
    <option>Please choose from above</option>
</select>

干杯

Answer 1

您不需要使用拆分，因为data.beverages已经是数组。

vals = data.beverages;

编辑：

发现了这个问题。您没有正确地将该项目附加到下拉列表中。也可以使用上面的方法来选择值。

$secondChoice.append("<option>" + value + "</option>");

JSON表格人口

1 个答案: