javascript - 如何显示数组javascript中的复选框值
问题描述
我有一个下拉按钮(模型)的值数组,它生成动态复选框(目标)。但是,我想根据所选模型和检查目的地显示不同的标准。我很抱歉这个问题。我是 javascript 新手,还在学习。谢谢
Javascript:
function populate(model, destination) {
var mod = document.getElementById(model);
var des = document.getElementById(destination);
des.innerHTML = "";
if (mod.value == "model-a") {
var optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"];
} else if (mod.value == "model-b") {
var optionArray = ["Model-B.1", "Model-B.2", "Model-B.3"];
} else if (mod.value == "model-c") {
var optionArray = ["Model-C.1", "Model-C.2", "Model-C.3"];
}
for (var option in optionArray) {
if (optionArray.hasOwnProperty(option)) {
var pair = optionArray[option];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = pair;
checkbox.value = pair;
des.appendChild(checkbox);
var label = document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
des.appendChild(label);
des.appendChild(document.createElement("br"));
}
}
}
解决方案
你必须id
用引号括起来:
var mod = document.getElementById('model');
var des = document.getElementById('destination');
function populate(model, destination) {
var mod = document.getElementById('model');
var des = document.getElementById('destination');
des.innerHTML = "";
if (mod.value == "model-a") {
var optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"];
} else if (mod.value == "model-b") {
var optionArray = ["Model-B.1", "Model-B.2", "Model-B.3"];
} else if (mod.value == "model-c") {
var optionArray = ["Model-C.1", "Model-C.2", "Model-C.3"];
}
for (var option in optionArray) {
if (optionArray.hasOwnProperty(option)) {
var pair = optionArray[option];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = pair;
checkbox.value = pair;
des.appendChild(checkbox);
var label = document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
des.appendChild(label);
des.appendChild(document.createElement("br"));
}
}
}
<select id="model" onchange="populate();">
<option></option>
<option>model-a</option>
<option>model-c</option>
<option>model-b</option>
</select>
<hr>
<div id="destination"></div>
推荐阅读
- typescript - 你如何在 Jasmine 中测试一个 Typescript 函数?
- python - Pyplot 错误栏无法传递颜色数组
- database - 无法清楚地了解 oracle 中的 intersect
- python - 为什么 FreezeGun 不能使用 SQLAlchemy 默认值?
- sql-server - 为存储过程限制对 SQL Server 的授权 - 仅调用
- appium - 在 appium 医生中出现意外的令牌错误
- r - 使 R 函数返回一个锁定/不可变列表
- java - 遍历目录并获得 UnsupportedOperationException
- vba - 单击带有 java 脚本的 web 元素
- php - 在 tcpdf 中显示泰卢固语 unicode 字体是否需要任何配置?