通过ajax无法填写HTML下拉列表

时间:2016-10-17 13:13:57

标签: javascript jquery html json ajax

<script type="text/javascript">
    $(document).ready(function () {  
         $.ajax({
             url: '/Umbraco/api/RegisterUser/GetCountry',
            type: 'GET', // You can use GET
            data: '{}',
            dataType: "json",
            context: this,                
            success: function (data) {
                alert(data);

                $.each(data, function (key, item) {
                    $('#ddcountry').append(
                        $("<option></option>")
                          .attr("value", item.Country_name)
                          .text(item.Country_name)
                    );
                });

                alert("success");
            },
            error: function (request) {
                alert("error");                   
            }
        });  
});

我在URL路径上返回的代码是

 [HttpGet]
 public string GetCountry()
 {
    String daresult = null;
    DataSet ds = new DataSet();
    DataTable dt = new DataTable();
    DataTable dt1=new DataTable();
    using (SqlDataAdapter da = new SqlDataAdapter("SELECT countryid,country_name FROM country_master", UmbracoConnectionString))
    {
        da.Fill(dt1);
    }

            System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>(10);
            Dictionary<string, object> row;

            foreach (DataRow dr in dt1.Rows)
            {
                DataRow[] dr1 = dt1.Select("countryid=" + dr["countryid"]);
                if (dr1.Count() > 0)
                {
                    row = new Dictionary<string, object>();
                    foreach (DataColumn col in dt1.Columns)
                    {
                        if (col.ColumnName == "country_name")
                            {
                                row.Add(col.ColumnName, dr[col]);                                   
                            }                                

                    }
                    rows.Add(row);
                }
            }
            return serializer.Serialize(rows);
        }

我的HTML代码位于我手动插入一些数据的位置

  Country:<select id="ddcountry">
    </select>

但通过做所有这些事情**我应该如何填写我的下拉列表中的数据,如下图所示的数据

在数据警报时我获取数据如下

enter image description here

3 个答案:

答案 0 :(得分:1)

我想,它会解决你的问题:

首先,您需要将JSON字符串转换为JSON数组,然后迭代它以为options下拉列表动态创建select

var res = jQuery.parseJSON(data);

$.each(res , function (key, item) {
    $('#ddcountry').append(
        $("<option></option>")
          .attr("value", item.country_name)
          .text(item.country_name)
    );
});

答案 1 :(得分:0)

成功部分有这样的事情:

                $.each(data, function(i, item) {
                    $('#yourDiv').find('#yourSelect')
                    .append($('<option>', { value: item['yourID'], 
                                           text: item['yourText'] }));
                });

也可以在课堂上尝试这样做:

//daresult = DataSetToJSON(ds);
return Json(daresult);

答案 2 :(得分:0)

试试这个

public Bicycle() {
    gear = 1;
    cadence = 10;
    speed = 0;
}

Bicycle yourBike = new Bicycle();