jquery - 如何用HTML存储数据库项目的列表？

我正在使用Django框架进行项目。我正在向用户表显示数据。每行旁边都有一个“编辑”按钮。当用户单击此按钮时，在行的其中一个单元格中，将出现带有用户名的选择框。当前，为了向该HTML select元素提供选项，我将所有用户名存储在div元素的data属性中，当用户单击此“编辑”按钮时，我将从该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”

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

jQuery的：

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

关于jquery - 如何用HTML存储数据库项目的列表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26004249/