javascript - 试图显示来自多个动态选择框的特定结果
问题描述
我有一个带有特定选项的选择框,然后是第二个选择框,它根据第一个选择动态变化并从一系列选项中进行选择。我试图根据前两个选择显示具体结果。
这是我的html:
<h2>Valve Selection Guide</h2>
<hr />
Choose Fluid
<select id="slct1" name="slct1" onChange="populate (this.id, 'slct2')">
<option value=""></option>
<option value="Accelerators">Accelerators</option>
<option value="Activators">Activators</option>
<option value="Alcohol">Alcohol</option>
</select>
<hr />
Choose Valve Application
<select id="slct2" name="slct2"></select>
这是我的Javascript:
<script type="text/javascript">
function populate (s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "Accelerators"){
var optionArray = ["|", "microdots|Microdots","dots|Dots","jetting|Jetting","lines/stripes|Lines/Stripes","filling/packaging|Filling/Packaging","microspray|Microspray","316l aseptic microspray|316L Aseptic Microspray","spray|Spray","internal spray|Internal Spray","internal band|Internal Band"];
}
else if(s1.value == "Activators"){
var optionArray = ["|", "microdots|Microdots","dots|Dots","jetting|Jetting","lines/stripes|Lines/Stripes","filling/packaging|Filling/Packaging","microspray|Microspray","316l aseptic microspray|316L Aseptic Microspray","spray|Spray","internal spray|Internal Spray","internal band|Internal Band"];
}
else if(s1.value == "Alcohol"){
var optionArray = ["|", "microdots|Microdots","dots|Dots","jetting|Jetting","lines/stripes|Lines/Stripes","filling/packaging|Filling/Packaging","microspray|Microspray","316l aseptic microspray|316L Aseptic Microspray","spray|Spray","internal spray|Internal Spray","internal band|Internal Band"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|")
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
我撞到了一堵墙。我希望动态显示结果。我有一个结果列表。这基本上是从一个表格开始的,我试图让它成为一个动态选择器。因此,如果您从 x 列中选择一个选项,然后从 y 列中选择一个选项,您会得到一个结果。
希望这已经足够清楚了。
谢谢
解决方案
推荐阅读
- java - 对 xml 模式中的值列表进行排序
- entity-framework-core - Automapper.ProjectTo() 抛出空引用异常
- git - git repack:按文件类型隔离和按组配置包?
- vcftools - 如何使用 vcftools 按读取深度进行过滤?
- mongodb - 无法连接robo 3t localhost;27017 窗户 10
- python - chrome 88 无法重新定义 webdriver
- sql - 我的 cs50 pset 7 10.sql 嵌套查询哪里出错了?
- c# - 在 DbContext 的 OnConfiguration 中使用 connectionString
- javascript - 事件的自定义视图
- html - 如何使用 css 在链接旁边添加文件格式图标