Jquery 如何在HTML中存储数据库项列表？

我正在使用Django框架进行一个项目。我正在向用户显示包含数据的表。每行旁边都有一个编辑按钮。当用户单击此按钮时，在行的一个单元格中，选择框显示用户名。当前，为了向这个HTML select元素提供选项，我将所有用户名存储在div元素的data属性中，当用户单击这个Edit按钮时，我从这个data属性获取列表以创建选项。在我看来，这不是正确的解决办法。有没有更好的解决方案将用户名存储在页面中，以便我在需要时获取它们？ 当前代码：

<div id="usernames" data-usernames="{{users |safe}}" class="hidden"></div>
(...)

var divWithUsernames = document.getElementById("usernames");
var usernames = (divWithUsernames.getAttribute("data-usernames").replace(/&(l|g|quo)t;/g, function (a, b) {
    return {
        l: '<',
        g: '>',
        quo: '"'
    }[b];
}));
for (var i = 0; i < usernames.length; i++) {
    var val = usernames[i];
    var option = $("<option />", {value: val, text: val});
    option.appendTo($select);
}

---

我会使用ajax加载json数据，并在需要时填充选择列表

它看起来像这样：

JSON users.JSON jQuery：

---

为什么不使用select元素创建一个表单，并在CSS显示中为其设置：none；当用户单击“编辑”时，使用jQuery将其更改为显示：block；或显示：块内联；？你让你的生活变得复杂了，说得对。我还没想过。谢谢你的建议。编辑：行是在页面加载之后创建的，因为它们是由jquery数据表以延迟的方式绘制的，所以不可能更早地创建表单。但它不会产生不必要的HTTP请求吗？这将导致每次用户想要编辑一行时调用HTTP请求，他可能会编辑几行，每次都用AJAX加载相同的数据。如果json数据没有更改，您不必在每个请求上加载json数据，只需在每次页面加载时加载。这与将javascript对象加载到页面，并在需要时随时使用该对象填充列表相同。

[{ user: "bob", age: 40 }]

$.get("users.json",function(data){
  $.each(data,function(i,v){
     $("<option/>").html(v.user).val(v.age).appendTo("select#usernames");
  });
});