填充使用带有Json数据的Javascript / Jquery单击选择框选项
我还在学习Jquery，并且对我手上的任务感到困惑。
看起来像一个简单的任务…我有一个盒子，我想用点击选项填充。 我不希望它在页面加载时填充，只有当有人实际请求查看列表时。 它也必须只填充一次。 我真的不希望每次有人扩展列表时请求都会出去。
我想我可能在我的Select元素中有一个函数调用
然后有一个Javascript getUsers（）函数调用我的Json GetUsers（）ActionMethod来获取该列表。 怎么样 ？
就像是…？
function getUsers() { getJSON("/Users/GetUsers", null, function (data){} }
还是JQuery？…
$("usersList").click( $.getJSON("/Users/GetUsers", null, function (data) {} )
我应该提一下，我看到这篇文章： 当加载选择列表时（不是文档），在JQuery中用json数据填充selectlist
但是我需要帮助把它们放在一起。 先感谢您！
这是我用来填充选择框的javascript。
$.getJSON("/Users/GetUsers", null, function(data) { $("#UsersList option").remove(); // Remove all ") // Yes you can do this. .text(item.Description) .val(item.Id) ); }); });
我建议您在页面加载时触发此操作，而不是在用户单击选择框时触发。 jQuery AJAX默认情况下是异步的（因为它应该是这样）所以有一两个选择框将为空，这可能会使用户大为混乱。
这是你的问题的范围，还是你需要MVC方面的帮助？ 如果您正在使用ASP.Net MVC，实际上有一个特定的JsonResult结果类型，这使得创建JSON控制器方法更简单，因为它们不需要相应的视图。 它还允许您使用匿名数据结构，这使得特定于方法的投影更简单一些。
编辑这是返回JSON结构的基本方法，上面的jQuery代码将理解。 请注意，属性u.Username和u.ID取决于您的Users对象。
[HttpPost] public JsonResult GetUsers() { return Json(new { Users = from u in _usersRepository.Get() select new { Description = u.Username, ID = u.ID } }); }
但我建议你尽快放弃这种方法并使用标准的JSON消息结构。 我使用的是这样的：
{ Success: bool, LoggedIn: bool, ClientErrors: [ { Number: int, Description: string, Parameter: string }, { Number: int, Description: string, Parameter: string }... ], ServerErrors: [ { Id: int, Message: string }, { Id: int, Message: string }... ], Data: {} }
以下是执行此操作的几个原因：
- 毫无疑问，您的JSON方法库是一种各种协议，因此它受益于标准头。
- error handling从中受益最多。 有一个让用户知道出错的一致方法是非常宝贵的。
- 区分客户端错误（错误的用户名，错误的密码等）和服务器错误（数据库脱机）非常重要。 一个用户可以修复，另一个他们不能修复。
- 客户端错误不仅应返回消息，还应返回导致它的方法中的参数（如果适用），以便您可以在相应的输入字段旁边轻松显示这些错误消息。
- 客户端错误还应提供标识错误的唯一编号（每种方法）。 这允许多语言支持。
- 服务器错误应提供记录的错误的ID。 这样，您可以允许用户联系支持人员并引用他们遇到的特定错误。
- 登录布尔值允许任何使用需要身份validation的方法的页面在必要时轻松地将用户重定向回登录屏幕，因为JSON方法的重定向操作结果将不起作用。
- 最后，数据字段是应该提供方法特定数据的位置。
绝不应该将我的结构视为实现它的方式。 显然，您的应用需求可能与我的不同。 一致性，比任何特定结构更重要的是这里的教训。
编辑：06/01/2016 – 看到人们仍然在看这个答案。 关于填充下拉列表，我建议使用双向绑定框架。 就个人而言，我更喜欢Knockout.JS，虽然Angular.JS也可以做到这一点，但它有多简单轻巧。 除此之外，这个答案的其余部分仍然是最新的。
编辑：8/10/2016 – 代码缺少逗号。
我会使用jQuery选项。
// You are missing the new anonymous function call $("#usersList").click(function() { // If the select list is empty: if ($(this).find("option").size() > 0) { // Documentation on getJSON: http://api.jquery.com/jQuery.getJSON/ $.getJSON("/Users/GetUsers.php", null, function (data) { $.each(data.items, function(i,item){ // Create and append the new options into the select list $("#usersList").append(""); }); }); } });
由于append()操作相对“昂贵”，您还可以构建一个包含信息的字符串，并将其附加一次，如下所示：
var collaboration = ""; $.each(data.items, function(i,item){ collaboration += ""; }); $("#usersList").append(collaboration); ...
这是一个jsfiddle ，演示如何确定选择列表是否为空。