Обновление выпадающего списка с помощью Jquery из JSON

Question

У меня есть список, который мне нужно заполнить, используя коллекцию объектов JSON.Вот что возвращает мое действие:

public ActionResult GetProductCategories()
        {
            var categories = _entities.ProductCategories.ToList();

            var result = new List<SelectListItem>();

            foreach (var category in categories)
            {
                result.Add(new SelectListItem {Text = category.CategoryName, Value = category.CategoryId.ToString()});
            }

            return Json(result, JsonRequestBehavior.AllowGet);
        }

Это то, что я придумал для своего javascript, собранного из разных источников:

function loadCategories() {
            $.getJSON("/Admin/Product/GetProductCategories", null, function (data) {
                var selectList = $("#subCategories");

                $.each(data, function(index, optionData)
                {
                    var option = new Option(optionData.Text, optionData.Value);
                    selectList.add(option, null);
                });                
            });
        }

Но оно не появляетсяработать, и не дает никаких ошибок.Какова лучшая практика для такого рода вещей?

Answer 1

Мне было интересно, чего вы пытаетесь достичь в следующих строках кода,

var option = new Option(optionData.Text, optionData.Value);
selectList.add(option, null);

Вы пытаетесь создать option и добавить его на select? если это так, сделайте это так, используйте .append()

selectList.append(option);

с этим я все еще предполагаю, что new Option(optionData.Text, optionData.Value); создает новый option, в jQuery это было бы так

---

добавлены примечания для .add(),

var selectList = $("#subCategories"); // creates jQuery object selectList.
selectList.add(option, null); // selectList is jQuery object,
                              // so when you call .add(), you're calling jQuery's `add()`.

это обходной путь,

selectList[0].add(option, null); // you can use [0] to convert it into DOM object.

разница между:

• DOM select объекта .add ()
• Объект jQuery .add ()

Answer 2

JQuery молча терпит неудачу, если ему не нравятся данные JSON, возвращаемые с сервера. Направьте ваш браузер на / Admin / Product / GetProductCategories и посмотрите на результат. Убедитесь, что в нем нет тегов html, и убедитесь, что вокруг имен ключей есть двойные кавычки.