时间戳

首页 > 解决方案 > 带有 JQuery 的下拉 json 数据显示“未定义”结果

jquery - 带有 JQuery 的下拉 json 数据显示“未定义”结果

问题描述

我有一个选择，我想用 json 数据结果填充，但数据显示为“未定义”。根据场景，当一个按钮被按下时，根据选择的id的数据将被排序到下拉列表中。

<select id="myDropDown" name="myDropDown"></select>

function bindItems(MarkaID) {

        var MarkaID = 136; //entering data manually
        $.ajax({
            type: 'POST',
            dataType: "json",
            data: JSON.stringify({ MarkaID: MarkaID }),
            contentType: "application/json; charset=utf-8",
            url: '/Home/GetUrunCinsleriForMarka'
        }).done(function (jsonObj) {

            var listItems = "";
            for (i in jsonObj) {

                listItems += "<option value='" + jsonObj[i].Key + "'>" + jsonObj[i].Value + "</option>";

            }
            $("#myDropDown").html(listItems);

        });
    }

[HttpPost]
        public JsonResult GetUrunCinsleriForMarka(int MarkaID)
        {
            List<SqlParameter> sqlparameters = new List<SqlParameter>();
            sqlparameters.Add(new SqlParameter("@MarkaID", MarkaID));
            var urunCinsList = db.Database.SqlQuery<UrunCinsleriForMarka>("SP_GetUrunCinsleriForMarka @MarkaID", sqlparameters.ToArray());

            return Json(urunCinsList, JsonRequestBehavior.AllowGet);
        }

像这样的示例数据 id 和值

96  | Power Supply
71  | Cameras
6   | Alarm Devices
118 | Mouse
11  | Fever-measuring devices
58  | Kettle
59  | ..............
137 | ..............
139 | ..............

标签： jqueryjsonmodel-view-controller

解决方案

我为您的问题制作了示例代码。请通过以下代码：

HTML 代码：

<select id="questionNumber" class="form-control">
   <option>Select Number</option>
</select>

jQuery代码：

var result = {data:[
    {
    id:"5",
    number: "5"
  },
  {
    id: "89",
    number: "89"
  }
]}
$.each(result.data, function (key, value) {
    $("#questionNumber").append($('<option>', {
        value: value.id,
        text: value.number,
        'data-mark': value.id
    }));
});

JSFIddle 链接在这里：

https://jsfiddle.net/u5vek​​2jc/

推荐阅读