javascript - 如何从 json 设置 HTML 选择选项

Question

我有一个外部 .json 文件，其中 arry 定义为:

var words = [
    "a",
    "able",
    "about",
    "account",
    "acid",
    "across",
    "act",
    "addition"]

我的计划是通过jquery导入.json文件，然后使用数组word中的值作为option在 select目的。 我的理解是:

<div>
    <select size="7" class="selection"></select>
</div>

<script>
    $(document).ready(function () {
        $.getJSON("words-small.json", function (result) {
            $.each(result, function (i, word) {
                $(".selection").html("<option>word</option>");
            });
        });
    });
</script>

或者:

<script>
    $(document).ready(function () {
        $.getJSON("words-small.json", function (result) {
            html = ''
            for (i = 0; i < results.length; i++) {
                html += "<option value=" + result[i] + ">" + result[i] + "</option>";
            };
            document.getElementById("myselect").innerHTML = html;
        });
    });
</script>

但这两者都不起作用。请告诉我如何解决这个问题。

Answer 1

您的 .json 文件需要如下所示:

[
    "a",
    "able",
    "about",
    "account",
    "acid",
    "across",
    "act",
    "addition"
]

然后这两个脚本都应该可以工作。 (第一个有一个小调整)

<div>
    <select size="7" class="selection"></select>
</div>

<script>
    $(document).ready(function () {
        $.getJSON("words-small.json", function (result) {
            $.each(result, function (i, word) {
                $(".selection").append("<option>"+word+"</option>");
            });
        });
    });
</script>

请记住，.json 文件应仅包含 JSON。不是你所拥有的 javascript。