javascript - 尝试使用 AJAX 调用填充选择标签时出现问题

Question

我正在开发一个用于控制库的小项目，我需要用我拥有的数据库上的所有库填充一个选择标签。为此，我创建了一个 WebService，其中包含一个名为 GetBibliotecas 的 Web 方法，负责以 JSON 格式返回所有库；其代码如下所示:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class BibUtil : WebService
{
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string GetBibliotecas()
    {
        return JsonConvert.SerializeObject(DAOFactory.GetInstance(DAOFactory.DAOType.Biblioteca).Select());
    }
}

That's the result returned from the WebMethod:

[{"IdBiblioteca":3,"Nome":"Biblioteca FESO
Campus","Endereco":"Avenida Oliveira
Botelho"},{"IdBiblioteca":5,"Nome":"Biblioteca FESO
Pro-Arte","Endereco":"Rua
Exemplo"},{"IdBiblioteca":11,"Nome":"Biblioteca FESO Quinta do
Paraíso","Endereco":"Avenida da
Prata"},{"IdBiblioteca":12,"Nome":"Exemplo Library","Endereco":"Rua
EX"}]

在我的 View 页面上，我尝试使用 AJAX 以便在页面加载后立即异步使用 WebService 方法。下面是我编写的代码片段:

<script>
$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "../Services/BibUtil.asmx/GetBibliotecas",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('#ddlLibraries').get(0).options.length = 0;
            $('#ddlLibraries').get(0).options[0] = new Option("Selecione uma biblioteca", "-1");

            $.each(data.d, function (index, item) {
                $('#ddlLibraries').get(0).options[$("#ddlLibraries").get(0).options.length] = new Option(item.Display, item.Value);
            });
        }
    });
});

但是当页面在浏览器上渲染时，控制台上出现一些奇怪的错误:

Uncaught TypeError: Cannot use 'in' operator to search for '325' in [{"IdBiblioteca":3,"Nome":"Biblioteca FESO Campus","Endereco":"Avenida Oliveira Botelho"},{"IdBiblioteca":5,"Nome":"Biblioteca FESO Pro-Arte","Endereco":"Rua Exemplo"},{"IdBiblioteca":11,"Nome":"Biblioteca FESO Quinta do Paraíso","Endereco":"Avenida da Prata"},{"IdBiblioteca":12,"Nome":"Exemplo Library","Endereco":"Rua EX"}]

我的目的是使用 IdBiblioteca 作为下拉列表(选择标签)的 ID 值，并使用库名称 (Nome) 显示选项本身。代码有什么问题吗？

谢谢。

Answer 1

无需每次都查找选项的索引和长度。可以创建所有选项，然后使用 html() 或在清空容器后单独追加

success: function (data) {
    // empty the <select>
    var $select = $('#ddlLibraries').empty();

    // add default to array
    data.d.unshift({
        Nome: "Selecione uma biblioteca",
        IdBiblioteca: -1
    });
    // creaate and append options
    $.each(data.d, function (index, item) {
        var $option = $('<option>').text(item.Nome).val(item.IdBiblioteca);
        $select.append($option);
    });
}

对您使用属性创建新选项的代码感到困惑，而该选项在显示的数据中不存在