Блог

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

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

#jquery #asp.net #html-select

#jquery #asp.net #html-select

Вопрос:

Какой лучший способ добавить <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() ?

Ответ №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 магию, чтобы убедиться, что они выполняются в порядке записи. Т.Е. создается шаблон select, затем добавляются опции

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

Комментарии:

1. Проблема в том, что у меня есть куча разметки, которая возвращается из вызова ajax, и здесь есть мой select. Я должен показать разметку внутри диалогового окна, а перед этим я должен добавить параметры. Как я могу поступить в этом случае?

2. @Lorenzo вы хотите не показывать пустое поле выбора перед добавлением опций?

3. @Raynos показывать это нормально. Я просто запутался в том, куда вставить мой код. Пожалуйста, посмотрите на мой вопрос редактировать для деталей.

4. что $.when().then() сделал бы @Lorenzo, чтобы убедиться, что они выполняются в правильном порядке?

5. Вау! Это именно то, что я ищу… но, к сожалению, это не работает на сайте mi. Код корректно выполняется в правильном порядке, но никакие опции не добавляются… Я собираюсь немного отладить свой код…

Ответ №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);