Заполнить DropDownList с помощью jQuery

Question

Как вы можете заполнить DropDownList с помощью jQuery?

У меня есть вызов к контроллеру:

$.getJSON('@Url.Action("GetCategories")', { groupId: selectedGroup }, function (categories) {

Это возвращает объекты из класса Category:

  public class Category
  {
      public int Id { get; set; }
      public int GroupId { get; set; }
      public string Description { get; set; }
  }

Как мне получить идентификатор из категории в значении DropDownList и описание из категории в тексте?

Это не работает ..

$.each(categories, function (index, category) {
categoriesSelect.append($('<option/>', {
    value: category.Id,
    text: category.Description
 }));
});

Это не работает, это даетсообщение "категория не определена".

Это то, что находится в категории:

Answer 1

Я замечаю в вашем вопросе, что таблица категорий, которую вы получаете в ajax - это объекты:

 public class Category
  {
      public int Id { get; set; }
      public int GroupId { get; set; }
      public string Description { get; set; }
  }

ваши атрибуты в ответе ajax изменяются Id -> id;GroupId -> groupId;Description -> description. кажется, что есть преобразование из вашей первой буквы атрибута в нижний регистр. Пожалуйста, примите это во внимание при создании раскрывающегося списка

. Этот код может помочь. Массив категорий здесь содержит объекты в формате ответа, который вы получили под названием Ajax:

$(function(){
// soit ce tableau de catéogies. Dans ton cas, tu la reçoi après ton appel AJAX
  var categories = [
  {
     id: 1, 
     groupId: "Gp1", 
     description: "Category 1"
  },  
  {
     id: 2, 
     groupId: "Gp1", 
     description: "Category 2"
  },  
  {
     id: 3, 
     groupId: "Gp1", 
     description: "Category 3"
  },  
  {
     id: 4, 
     groupId: "Gp1", 
     description: "Category 4"
  },  
  {
     id: 5, 
     groupId: "Gp1", 
     description: "Category 5"
  }];
  
  // Vide au préalable la liste déroulante sinon, la liste de catégories renvoyées en Ajax viendra s'ajouter à celles déja charger
  $("#myDynamicSelect").html("");
  
  // Avec une boucle, tu parcours ton table de catégories "categories", dans ton cas tu la reçoi dans ta réponse ajax
  $.each(categories, function(i, category){
  // Pour chaque catégorie, tu l'insère dans la liste déroulante. Veille bien à renseigner le bon attribut id de ta liste déroule. ici "#myDynamicSelect"
    var option = new Option( category.description, category.id);
    $("#myDynamicSelect").append(option);
  });   


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myDynamicSelect"></select>

Answer 2

Вот, пожалуйста:

categoriesSelect.append($("<option></option>")
    .attr("value", category.Id)
    .text(category.Description));

Answer 3

Я допустил небольшую ошибку, это должен быть category.id вместо category.Id и category.description вместо category.Description.

Answer 4

Попробуйте сделать так,

$.get('http://webapi.com' , function (res) {
    if (res) 
    {  
        if (res.customers && res.customers.length > 0) 
        {
            $.each(res.customers, function (id, cus) {
                $("#customers-dropdown").append($('<option></option>').val(cus.id).html(cus.name));
            });
        }
    }
});