Добавление параметров в динамически загруженный выбор

Question

Какой лучший способ добавить <option>...</option> к выбору, который был динамически добавлен в dom?

Я имею в виду общий <select>, который был добавлен впоследствии при вызове ajax.Я хотел бы добавить эту опцию перед отображением элемента выбора.

спасибо!

РЕДАКТИРОВАТЬ

Это функция, которая у меня есть

$.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");

Хитрость заключается в добавлении параметров перед добавлением выбора к чему-либо.

В качестве альтернативы вы можете убедиться, что скрыли выбор, прежде чем добавить его в DOM.псевдокод:

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

...

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

[[Edit]]

Используйте простой бит $.when magic, чтобы убедиться, что они происходят в порядке записи.Т.е. шаблон выбора создается, а затем добавляются параметры

$.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));
        });
    });
});

[[Edit 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);