Question

以下代码创建了选择标记。我在这里创造选择。并为其赋值。其实我想把我的所有“grad_id”添加到数据库的select下拉列表中。但是在javascript中。

var gradeSelect=document.createElement('Select');
gradeSelect.id="grade[]";
gradeSelect.name="grade[]";

var opt1=document.createElement('option');
opt1.value="obj";
opt1.textContent="obj";

gradeSelect.appendChild(opt1);

在“obj”的地方，我想从数据库中添加id。

Answer 1

请注意，javascript在客户端的浏览器中执行，因此不可能从那里直接访问数据库（我假设你在谈论服务器上的传统数据库而不是WebSQL，LocalDB或类似的东西。

javascript 可以访问的内容，例如DOM。例如，您可以创建元素并将其插入到DOM中（就像您在示例中所做的那样），但您也可以访问已存在的元素。

您还可以创建AJAX个请求。这是对服务器的异步请求，您可以使用它来获取所需的数据。

但是，如果没有一些服务器端代码，您将无法管理数据库。看到你的问题，目前尚不清楚你用什么技术来生成你的HTML（PHP.ASP，JSP，Ruby等等）。但无论你使用什么模式仍然是通常的：

创建页面，您可以从中获取数据。该页面应为 XML 或 JSON （或非常基本情况下的HTML），并且只包含您希望从服务器获取的数据。
在客户端（javascript）为您在上一步中创建的页面创建一个AJAX请求。通过这种方式，您可以将所需的数据提供给javascript，您可以在其中执行任何操作。
最后转换并使用数据。

假设您能够执行前两个步骤，并且您的数据位于（例如）JSON中。你有一个包含字符串中的JSON的变量。像这样：

var response = '[ { "id": 1, "text": "First" }, { "id": 2, "text": "Second" } ]';

您不需要像这样输入它，而是从服务器上获取它。

该怎么办？ Make a javascript object来自它：

var responseObj = JSON.parse(response);

这将返回一个对象，该对象是包含id和text属性的2个对象的数组。

然后用循环来完成它：

var gradeSelect=document.createElement('Select');
gradeSelect.id="grade[]";
gradeSelect.name="grade[]";

for (var i = 0; i < responseObj.length; i++) {
    var current = responseObj[i];
    var opt=document.createElement('option');

    opt.value = current.id;
    opt.textContent = current.text;

    gradeSelect.appendChild(opt);
}

随意浏览MDN portal，您可以从中学到很多东西。

这是你在找什么？

修改：

查看您的示例，您只需要来自服务器的ID：

var response = '[ 1, 2, 3, 5, 10, 20, 1000 ]'; var responseObj = JSON.parse(response); // Will return a list of numbers

然后：

var gradeSelect=document.createElement('Select'); gradeSelect.id="grade[]"; gradeSelect.name="grade[]"; for (var i = 0; i < responseObj.length; i++) { var current = responseObj[i]; var opt=document.createElement('option'); opt.value = current; opt.textContent = current gradeSelect.appendChild(opt); }

<强> EDIT2 ：

另一种方法是将值呈现为原始响应。这样就不需要额外的ajax请求了。

如果我理解你的评论，你就是这样做的：

<html> <head> ... </head> <body> ... <div id="hidden_container"> <input type="hidden" class="grade_id" value="1" /> <input type="hidden" class="grade_id" value="2" /> <input type="hidden" class="grade_id" value="3" /> <input type="hidden" class="grade_id" value="4" /> </div> </body> </html>

请注意，我已使用具有ID的容器div包装隐藏字段。这将帮助我选择内容。

现在您需要解析这些输入并将它们转换为数字数组。

var inputs = document.getElementById('hidden_container').getElementsByTagName('input'); var numbers = []; for (int i = 0; i < inputs.length; i++) { numbers.push(inputs[i].value); }

numbers变量是一个数字数组。如果您检查我上面的代码，您可以使用此变量代替responseObj，并且您已完成。

这个方法的问题是为什么你没有首先通过php渲染选项。如果您可以渲染隐藏字段，您也可以渲染选择选项。

Answer 2

看看这个例子。我想它会帮助你！

http://www.w3schools.com/php/php_ajax_database.asp

我想在javascript中创建select标签，我想从我的数据库中添加记录

2 个答案: