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，这就是你所拥有的。

Answer 2

你的代码中有一些拼写错误。

假设您有有效的json并解析了words数组

＆＃13;

var words = [
    "a",
    "able",
    "about",
    "account",
    "acid",
    "across",
    "act",
    "addition"];

$.each(words, function (i, word) {
   $(".selection").append("<option value='"+word+"'>" + word + "</option>");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <select size="7" class="selection"></select>
</div>

＆＃13;

Answer 3

第一次尝试，你正在做：

$(".selection").html("<option>word</option>");

你应该使用像append这样的东西，并确保你从引号中加入“word”：

$(".selection").append("<option>" + word + "</option">);

.html（）只是替换HTML元素中包含的数据，而.append（）会将它们添加到最后。

如果您只返回一个值，则会出现此问题。

在您的JSON对象中，您可以在变量中定义数据，而应该只是：

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

Answer 4

这项工作对我来说：

$.each(words, function (i, word) {
    items+="<option>"+word+"</option>";
});
$(".selection").html(items);

Answer 5

您有几件事需要修复。一，是.html（）取代了innerHTML，没有添加到它。因此，您需要构建所有选项然后进行设置。我也像在第二个脚本中那样，将单词的值作为选项值。注意，内部引号也是必需的。此外，你的jQuery＆＃34; .selection＆＃34;将对使用＆＃34;选择＆＃34;指定的所有对象执行此操作class，而在你的第二个脚本中，你似乎只想指定一个元素，其id为＆＃34; myselect＆＃34;。

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

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

Answer 6

您可以扩展jQuery。这种方法的最佳之处在于，您可以在需要清除或填充选择时重复使用这些扩展。只需传递一个数组。

$.fn.clearSelect = function() {
    return this.each(function() {
        if (this.tagName == 'SELECT')
            this.options.length = 0;
    });
}

$.fn.fillSelect = function(data) {
    return this.clearSelect().each(function() {
        if (this.tagName == 'SELECT') {
            var dropdownList = this;
            if (data.length > 0) {
                this.disabled = false;
            }

            $.each(data, function(index, optionData) {
                var option = new Option(optionData, optionData);

                dropdownList.add(option, null);
            });
        }
    });
}

此扩展程序允许您将数据直接传递给像这样的选择

$("#myselectid").fillselect(["a","able","about","account","acid","across","act"]);

我没有对此进行过测试，但剪辑它应该给你一般的想法。

但在您的示例中，您可以通过这种方式调用扩展程序：

$(document).ready(function () {
        $.getJSON("words-small.json", function (result) {
           $(".selection").fillSelect(result);
        }
});

刚刚测试并编辑了snipet。测试位于https://jsfiddle.net/4wmj8pkk/

如何从json设置HTML选择选项

6 个答案: