Добавление результатов JSON в выпадающий список с помощью JQUERY

Question

Я выполняю вызов метода страницы через AJAX в моем приложении ASP.NET с помощью метода AJAX JQUERY, например,

       $.ajax({
       type: "POST",
       url: "page.aspx/GetDropDowns",
       data: "{'aId':'1'}",
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function(msg) {
         alert(msg.d);
       },
       error: function() {
         alert('Error getting page');
       }

Я буду возвращать результаты в формате JSON, в результате чего я буду заполнять раскрывающийся список. Я мог бы сделать эту часть сам, но я хочу знать, есть ли в JQuery встроенная магия для обработки результатов JSON или есть ли какие-нибудь полезные служебные сценарии для такого рода вещей.

Answer 1

Существует небольшое количество jQuery, которые могут помочь вам в заполнении выпадающего списка. Вам просто нужно создать HTML и добавить его в выпадающий список.

Я не уверен, каков формат ваших данных, поэтому я предполагаю, что это объект, где ключи должны быть ключами раскрывающегося списка, а значения должны быть значениями раскрывающегося списка.

Я также предпочитаю использовать $.post, а затем $.ajax, поскольку он имеет более четкую структуру для меня.

$.post('page.aspx/GetDropDowns', {'aId': '1'}, function (data, status) {
    if (status === 'success') {
        var options = [];
        for (var key in data) {
            options.push('<option value="' + key + '">' + data[key] + '</option>');
        }
        $('#yourId').append(options.join(''));
    } else {
        alert('error');
    }
}, 'json');

Answer 2

В прошлом я использовал плагин при работе с выпадающими меню.

http://www.texotela.co.uk/code/jquery/select

Запрос данных JSON:

    //Get the JSON Data
    $.getJSON(url, function(json) {
       PopulateDropDownFromJson(json, "#element");
    });

, а затем просто передайте JSON в функцию, которая использует плагин выше

    function PopulateDropDownFromJson(json, element){
       $.each(json, function() {
       $(element).addOption(this[valueText], this[displayText], false);
    });

}