Question

我需要从另一台服务器中选择可能的选项，所以我使用AJAX，结果我得到了json，而response.experience看起来像

HTML

<select class="form-control" name="experience" id="experience"></select>

的jQuery

$.ajax({
        method: 'GET',
        url: 'https://example.com/dictionaries/',
    })
    .done(function (response) {
        console.log(response.experience);

        $.each(response.experience, function (key, value) {
            $('#experience')
                .append($("<option></option>")
                    .attr("value", key)
                    .text(value));
        });
    });

但在append之后，我在选项中获得了对象

如何在我的情况下创建选项？以及如何为第一个选项添加at selected？

Answer 1

您无需使用$.each来浏览数组，请使用array.forEach()或array.map()代替：

$.ajax({
        method: 'GET',
        url: 'https://example.com/dictionaries/',
    })
    .done(function (response) {
        console.log(response.experience);
        // using map
        $('#experience').append(
            response.experience.map(function (obj) {
                return $("<option/>")
                    .attr("value", obj.id)
                    .text(obj.name));
            })
        );
        // using forEach
        response.experience.forEach(function (obj) {
            $('#experience')
                .append(
                    $("<option></option>")
                        .attr("value", obj.id)
                        .text(obj.name)
                );
        });
    });

Answer 2

编辑：您几乎接近解决方案。请在选项属性中将value替换为value.name。这是工作代码。

   $.ajax({
        method: 'GET',
        url: 'https://example.com/dictionaries/',
    })
    .done(function (response) {
        console.log(response.experience);

        $.each(response.experience, function (key, value) {
            $('#experience')
                .append($("<option></option>")
                    .attr("value", value.name)
                    .text(value.name));
        });
    });

Answer 3

您正在遍历包含对象的数组，并且您将对象附加到选择列表。您可能需要附加对象的一个键，例如：＆＃39; id＆＃39;。并且$.each函数的回调函数将接受两个参数，即当前索引和值。第一个参数将始终为索引。编辑您的ajax代码如下：

$.ajax({
    method: 'GET',
    url: 'https://example.com/dictionaries/',
})
.done(function (response) {
    console.log(response.experience);

    $.each(response.experience, function (index,value) {
        $('#experience')
            .append($("<option></option>")
                .attr("value", value.id) //To append id of the json object to select list
                .text(value.id));
    });
    $('#experience').val(response.experience[0].id) // To add the selected attribute for the first option
});

添加选项以从JSON对象中进行选择

3 个答案: