Question

将<option>...</option>添加到已动态添加到dom的选择中的最佳方法是什么？

我指的是随后添加了ajax调用的通用<select>。我想在显示select元素之前添加选项。

谢谢！

修改

这是我的功能

$.ajax({
    type: "get",
    url: baseUrl + 'MyService.asmx/NewReferent',
    data: JSON.stringify({}),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        // Get the referent item from the webservice
        var referent = msg.d;
        // Render the template with the Referent data
        var referentTemplate = $("#referentTemplate").tmpl(referent);
        //add button style
        $(".button", referentTemplate).button();
        //Show the Dialog
        $("#referent-dialog").empty().html(referentTemplate).dialog('open');
    }
});

这是我必须从服务器获取选项的代码

$.getJson(baseUrl + 'MyService.asmx/GetReferentTypes', function (data) {
    $.each(data, function (key, value) {
        $('#select_id').append($("<option></option>").attr("value", key).text(value));
    });
});

编辑2

不幸的是，我无法理解我的代码发生了什么。通过对@Raynos代码的一些修改，我已经能够从服务器接收以下JSON数据

{"d":
    [
        {"__type":"Full.Namespace.Path.ReferentType","ReferentTypeID":1,"Description":"option1"},
        {"__type":"Full.Namespace.Path.ReferentType","ReferentTypeID":2,"Description":"option2"}
    ]
}

未在我的$.each()函数调用中正确解析。我现在有两个问题：

谁将要添加_type参数？
如何更正解析each()？

Answer 1

$("<select>").append(
    $("<option>" , {
        text: "foo",
        value: "bar"
    })
).appendTo("#container");

诀窍是在将select添加到某个内容之前附加选项。

或者，您可以确保在将选择添加到DOM之前隐藏选择。

伪代码：

$.when(ajax).then(function(html) {
    var foo = $(html);
    foo.find("select.SomeClass").hide();
    ...
});

...

$("select.SomeClass").append($("<option>")).show()

<强> [[编辑]]

使用$.when魔法的简单位来确保它们在写入顺序中发生。即创建选择模板，然后附加选项

$.when(
    $.ajax({
        type: "get",
        url: baseUrl + 'MyService.asmx/NewReferent',
        data: JSON.stringify({}),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            // Get the referent item from the webservice
            var referent = msg.d;
            // Render the template with the Referent data
            var referentTemplate = $("#referentTemplate").tmpl(referent);
            //add button style
            $(".button", referentTemplate).button();
            //Show the Dialog
            $("#referent-dialog").empty().html(referentTemplate).dialog('open');
        }
    }); 
}).then(function() {
    $.getJson(baseUrl + 'MyService.asmx/GetReferentTypes', function (data) {
        $.each(data, function (key, value) {
            $('#select_id').append($("<option></option>").attr("value", key).text(value));
        });
    });
});

[[编辑2]]

提供示例JSON结构

$.each(data.d, function (key, value) {
    $('#select_id').append(
        $("<option></option>")
          .attr("value", value.ReferentTypeID)
          .text(value.Description)
    );
});

会生成

<option value="0">option1</option>
<option value="1">option2</option>

Answer 2

这个简单的答案可能对你有帮助，

var selectField = $('#' + id_of_field);
var empIds = [101, 102, 103];
var empNames = ['X', 'Y', 'Z'];
var options = '';
selectField.empty();
for ( var i = 0, len = empIds.length; i < len; i++) {
    options += '<option value="' + empIds[i] + '">' + empNames[i] + '</option>';
}
selectField.append(options);

向动态加载的选择添加选项

2 个答案: