Javascript 将JSON结果列表获取到现有HTML中选择?
我有这个:Javascript 将JSON结果列表获取到现有HTML中选择?,javascript,jquery,html,asp.net-mvc-4,Javascript,Jquery,Html,Asp.net Mvc 4,我有这个: @Html.DropDownList("centres", (List<SelectListItem>)ViewData["centres"]) 结果1是来自我的MVC控制器类的列表。我希望能够用这些新结果编辑我现有的html下拉列表。当前,它显示selectListItems的列表,但在controller类的updateList中,我正在基于我刚刚创建的新中心创建一个新列表。我的控制器类方法如下所示: public JsonResult updateList() {
@Html.DropDownList("centres", (List<SelectListItem>)ViewData["centres"])
结果1是来自我的MVC控制器类的列表。我希望能够用这些新结果编辑我现有的html下拉列表。当前,它显示selectListItems的列表,但在controller类的updateList中,我正在基于我刚刚创建的新中心创建一个新列表。我的控制器类方法如下所示:
public JsonResult updateList()
{
List<SelectListItem> centres = new List<SelectListItem>();
SqlConnection conn = new SqlConnection(@"Data Source=(LocalDB)\v11.0;AttachDbFilename=C:\Users\Michael\Documents\Visual Studio 2012\Projects\OneEightyWebApp\OneEightyWebApp\App_Data\OneHoldings.mdf;Integrated Security=True");
SqlCommand cmd = new SqlCommand("SELECT Centre.Centre_Name, Count(Shop_No) AS Shop_Count FROM Centre LEFT JOIN Space ON Centre.Centre_Name = Space.Centre_Name GROUP BY Centre.Centre_Name;", conn);
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
conn.Open();
da.Fill(dt);
conn.Close();
for (int i = 0; i < dt.Rows.Count; i++)
{
centres.Add(new SelectListItem { Text = dt.Rows[i].ItemArray.GetValue(0).ToString(), Value = dt.Rows[i].ItemArray.GetValue(1).ToString() });
}
return Json(centres, JsonRequestBehavior.AllowGet);
}
有什么想法吗?您可以使用jquery重建下拉列表
$.getJSON("/Centres/updateList", function (results1) {
//Clear out the old values
$("#centres").empty();
//Add the input items back in
$.each(results1, function (key, val) {
$("#centres").append($("<option></option>").attr("value", val.Value).text(val.Text));
});
});
使用MVC的一个优点是它生成的html非常简单,可以用简单的jQuery命令轻松地复制。您可以重复使用attr函数,因此可以通过
if(val.Selected) {
$("#centres").append($("<option></option>")
.text(val.Text)
.attr("value", val.Value)
.attr("selected", "selected"));
}
我们应该猜猜你从服务器上得到了什么吗?这是一个列表。在updateList中创建的中心名称列表。我创建了更多的中心,然后需要用新的中心更新。请改进您的问题,发布JSON响应/输出的html,并指定如何更新select元素。
if(val.Selected) {
$("#centres").append($("<option></option>")
.text(val.Text)
.attr("value", val.Value)
.attr("selected", "selected"));
}