我正在用 HTML 和 JQuery 编写表单。 我想在页面加载后动态添加表单字段。
我在 HTML 文件中有这个:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="form-database-settings">
<label for="database_section">Database Settings</label>
<form id="database_section" class="form-settings">
</form>
</div>
</body>
</html>
这在我的 JS 文件中:
var dataset_options = [
{
text:"text1",
value:"value1"
},
{
text:"text2",
value:"value1"
}
];
window.onload = () => {
createDatabaseSettingsForm();
}
function createDatabaseSettingsForm(){
var formDatabaseSettings = $("#database_section")[0];
var datasetSelect = create_select_button("Dataset", "dataset_selector", "query-form-class", dataset_options)
formDatabaseSettings.appendChild(datasetSelect);
}
function create_select_button(label_value, select_id, select_class, options){
var div = document.createElement("div");
var label = document.createElement("label");
label.setAttribute("for", select_id);
label.setAttribute("value", label_value);
div.appendChild(label);
var select = document.createElement('select');
select.setAttribute("id", select_id);
select.setAttribute("class", select_class);
for (var option_index in options){
select.append($('<option value=${options[i].value}>${options[i].text}</option>'));
// select.append($("<option value=3>this is a text</option>"));
}
div.appendChild(select);
return div;
}
这是输出。 我想要一个标签，以及选择元素中的元素。 我做错了什么？
最佳答案
你不能混合使用 jQuery 和 Vanilla JS，因为这不容易阅读，而且你正在编写意大利面条式代码，这不是一个好的做法。我修改了你的代码，并添加了 VanillaJS 和 jQuery 的示例(jquery 也在codesandobx 上)
https://codesandbox.io/s/serene-mestorf-1wq9u
VanillaJS
const dataset_options = [
{
text: "text1",
value: "value1"
},
{
text: "text2",
value: "value1"
}
];
function createDatabaseSettingsForm() {
const formDatabaseSettings = document.querySelector("#database_section");
console.log(formDatabaseSettings);
const datasetSelect = createSelectButton(
"Dataset",
"dataset_selector",
"query-form-class",
dataset_options
);
formDatabaseSettings.appendChild(datasetSelect);
}
function createSelectButton(label_value, select_id, select_class, options) {
const div = document.createElement("div");
const label = document.createElement("label");
label.setAttribute("for", select_id);
label.setAttribute("value", label_value);
div.appendChild(label);
const select = document.createElement("select");
select.setAttribute("id", select_id);
select.setAttribute("class", select_class);
for (const option in options) {
const optionEl = document.createElement("option");
optionEl.setAttribute("value", options[option].value);
optionEl.innerHTML = options[option].text;
select.appendChild(optionEl);
}
div.appendChild(select);
return div;
}
createDatabaseSettingsForm(); <div id="form-database-settings">
<label for="database_section">Database Settings</label>
<form id="database_section" class="form-settings"></form>
</div>jQuery
const dataset_options = [
{
text: "text1",
value: "value1"
},
{
text: "text2",
value: "value1"
}
];
$(document).ready(() => {
createDatabaseSettingsForm();
});
function createDatabaseSettingsForm() {
const formDatabaseSettings = $("#database_section");
const datasetSelect = createSelectButton(
"Dataset",
"dataset_selector",
"query-form-class",
dataset_options
);
formDatabaseSettings.append(datasetSelect);
}
function createSelectButton(label_value, select_id, select_class, options) {
const div = $("<div/>");
const label = $("<label/>");
label.attr("for", select_id);
label.attr("value", label_value);
div.append(label);
const select = $("<select />");
select.attr("id", select_id);
select.attr("class", select_class);
for (const option in options) {
select.append(
$(
`<option value=${options[option].value}>${
options[option].text
}</option>`
)
);
}
div.append(select);
return div;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form-database-settings">
<label for="database_section">Database Settings</label>
<form id="database_section" class="form-settings"></form>
</div>关于javascript - 将带有标签的选择标签添加到 HTML 以动态 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60363204/