如何从json中设置HTML选择选项

How to set the HTML select options from a json

本文关键字：HTML 选择 选项 设置 json      更新时间：2023-09-26

我得到了一个外部.json文件，其中arry定义为：

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

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

<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>

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

您的.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，这正是您所拥有的。

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

假设您有有效的json和已解析的words数组

var words = [
    "a",
    "able",
    "about",
    "account",
    "acid",
    "across",
    "act",
    "addition"];
$.each(words, function (i, word) {
   $(".selection").append("<option value='"+word+"'>" + word + "</option>");
});
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <select size="7" class="selection"></select>
</div>

对于您的第一次尝试，您正在执行：

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

您应该使用类似append的东西，并确保从引号中去掉"单词"：

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

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

如果只返回一个值，就会出现这种情况。

看起来在JSON对象中，数据定义在一个变量中，而应该只是：

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

这项工作对我来说：

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

您有一些事情需要修复。一个是.html（）替换了innerHTML，而不是添加到它中。所以，你需要构建所有的选项，然后设置它们。正如您在第二个脚本中所做的那样，我还将单词的值作为选项值。请注意，内部引号也是必需的。此外，".selection"的jQuery将对所有用"selection"类指定的对象执行此操作，而在第二个脚本中，您似乎只想为分配一个id为"myselect"的

<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>

您可以扩展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);
        }
});

刚刚测试并编辑了狙击手。测试位于此处https://jsfiddle.net/4wmj8pkk/

相关文章：