使用JSON中的Jquery更新下拉列表

时间:2010-09-28 01:55:29

标签: javascript jquery json

我有一个列表,我需要使用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);
                });                
            });
        }

但它似乎不起作用,并没有给出任何错误。对于这类事情,最好的做法是什么?

2 个答案:

答案 0 :(得分:6)

我想知道你在下一行代码中想要实现什么,

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中就像这样var option = $('<option>').text(optionData.Text).val(optionData.Value);


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

区别:

答案 1 :(得分:1)

如果JQuery不喜欢从服务器返回的JSON数据,则会无声地失败。将浏览器指向/ Admin / Product / GetProductCategories并查看结果。确保它没有任何html标签,并确保键名称周围有双引号。