使用带有 Json 数据的 Javascript/Jquery 在单击时填充选择框选项

Posted 2023-05-08

【中文标题】使用带有 Json 数据的 Javascript/Jquery 在单击时填充选择框选项

【英文标题】：Populate Select box options on click with Javascript/Jquery with Json data

【发布时间】：2012-05-01 06:51:14

【问题描述】：

我仍在学习 Jquery，对我手头的任务有点困惑。

似乎是一个简单的任务... 我有一个框，我想在单击时填充选项。我不希望它在页面加载时填充，只有当有人实际请求查看列表时。此外，它只能填充一次。我真的不希望每次有人扩展列表时都发出请求。

我想我可能会在我的 Select 元素中调用函数

<select id="usersList" name="usersList" onclick="getUsers()">

然后让 javascript getUsers() 函数调用我的 Json GetUsers() ActionMethod 以获取该列表。 怎么样？

类似...？

function getUsers()

 getJSON("/Users/GetUsers", null, function (data)

还是 JQuery？...

$("usersList").click(
  $.getJSON("/Users/GetUsers", null, function (data) 
  )

我应该提到我看到了这篇文章： populate selectlist with json data in JQuery when the selectlist is loaded (not the document)

但是我需要帮助把它们放在一起。 提前谢谢！

【参考方案1】：

这是我用来填充选择框的 javascript。

$.getJSON("/Users/GetUsers", null, function(data) 
    $("#UsersList option").remove(); // Remove all <option> child tags.
    $.each(data.Users, function(index, item)  // Iterates through a collection
        $("#UsersList").append( // Append an object to the inside of the select box
            $("<option></option>") // Yes you can do this.
                .text(item.Description)
                .val(item.Id)
        );
    );
);

我建议您在页面加载时触发此操作，而不是在用户单击选择框时触发。 jQuery AJAX 默认是异步的（应该是这样的），所以会有一两个时间选择框是空的，这可能会让用户非常困惑。

这是您问题的范围，还是您也需要 MVC 方面的帮助？如果您使用的是 ASP.Net MVC，则实际上有一个特定的 JsonResult 结果类型，这使得创建 JSON 控制器方法更简单一些，因为它们不需要相应的视图。它还允许您使用匿名数据结构，从而使特定方法的投影更简单。

---

EDIT 这是返回上面 jQuery 代码可以理解的 JSON 结构的基本方法。请注意，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 方法库是一种协议，因此它受益于标准标头。 错误处理从中受益最大。采用一致的方法让用户知道出现了问题，这在未来非常宝贵。 区分客户端错误（用户名错误、密码错误等）和服务器错误（数据库脱机）非常重要。一个用户可以修复，另一个他们不能。 客户端错误不仅应返回消息，还应返回导致该错误的方法中的参数（如果适用），以便您可以轻松地在相应的输入字段旁边显示这些错误消息。 客户端错误还应提供一个唯一编号（每个方法）来标识错误。这允许多语言支持。 服务器错误应提供记录的错误的 ID。通过这种方式，您可以让用户联系支持人员并参考他们遇到的特定错误。 login 布尔值允许任何使用需要身份验证的方法的页面在必要时轻松将用户重定向回登录屏幕，因为 JSON 方法的重定向操作结果将无效。 最后，Data 字段是应提供方法特定数据的位置。

---

您绝不应该将我的结构视为的方法。显然，您的应用程序需求可能与我的大不相同。一致性，比任何特定的结构更重要的是这里的教训。

编辑：06/01/2016 - 看到人们仍在关注这个答案。关于填充下拉列表，我建议考虑使用双向绑定框架。我个人更喜欢 Knockout.JS，因为它既简单又轻量，尽管 Angular.JS 也能胜任。除此之外，这个答案的其余部分仍然是最新的。

编辑：2016 年 8 月 10 日 - 代码缺少逗号。

【讨论】：

嗯...我以为我没有，但你现在让我好奇了 :) 这是我的 ActionMethod 结果。你是说有更好的方法： [HttpPost] public JsonResult GetUsers() var myusers = _usersRepository.Get() if (HttpContext.Request.IsAjaxRequest()) return Json(new SelectList(myusers, "id", "姓名”））; 返回 Json(新的 SelectList(null));

干净完美。特别是$("<option></option>")

【参考方案2】：

我会使用 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("<option value="+item.id+">"+item.yourName+"</option>");
            );
        );
    
);

由于append() 操作相对“昂贵”，您也可以只构建一个包含信息的字符串并将其附加一次，如下所示：

var collaboration = "";
$.each(data.items, function(i,item)
    collaboration += "<option value="+item.id+">"+item.yourName+"</option>";
);
$("#usersList").append(collaboration);
...

这是一个jsfiddle，它演示了如何确定选择列表是否为空。

【讨论】：

.click 是否会为您触发？它在 JSFiddle 中工作，但它不会在 控件上为我触发

@Shenaniganz;哦，当然； .click 是一个值得信赖的好触发器。但是，可能发生的情况是，如果您有多个具有相同 ID 的控件（选择框），那么您可能不会遇到任何操作，具体取决于各种因素。如果您需要在单击时捕获多个选择框并且碰巧具有相同的 id，则通过共享类选择它们。另一件事是您在选择框中的“点击”本身可能会发生冲突。