代码之家  ›  专栏  ›  技术社区  ›  Grahame A

从JSON用Jquery更新下拉列表

  •  4
  • Grahame A  · 技术社区  · 14 年前

    我有一个列表,需要使用对象的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 回复  |  直到 14 年前
        1
  •  6
  •   Reigel Gallarde    14 年前

    我想知道在接下来的几行代码中你想要实现什么,

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

    你想创造一个 option 再加上它 select ? 如果是这样,就这样做,使用 .append()

    selectList.append(option);
    

    new Option(optionData.Text, optionData.Value); 正在创建一个新的 选项 ,在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.
    

    两者之间的区别:

        2
  •  1
  •   Matthew Smith    14 年前