首页 > 解决方案 > 试图显示来自多个动态选择框的特定结果

问题描述

我有一个带有特定选项的选择框,然后是第二个选择框,它根据第一个选择动态变化并从一系列选项中进行选择。我试图根据前两个选择显示具体结果。

这是我的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 列中选择一个选项,您会得到一个结果。

希望这已经足够清楚了。

谢谢

标签: javascripthtmlselect

解决方案


推荐阅读