Javascript 如何将所有文本框链接到相应的选择字段？

基本上，我想制作一个带有按钮的站点，该按钮反复请求用户输入。但是，站点要求的输入之一涉及一个选择字段，根据选择字段的不同，会出现或消失相应的文本字段（无值）。我的javascript使用for循环，因为用户可以反复按下按钮来添加越来越多的选择字段（以及相应的文本字段）

这是

下面是我试图做的示例代码

HTML

文本框
复选框
无线电

JAVASCRIPT

    var textBoxList = document.getElementsByClassName("DISPLAYTYPE");
         for (var i=0; i<textBoxList.length;i++){
    textBoxList[i].addEventListener('change', function(){

     var subParam = textBoxList[i].options[textBoxList.selectedIndex].value;

     if(subParam ="text"){
        //make ONLY corresponding input box appear
     }else{
     //make ONLY corresponding input box dissapear
     }

  })

 };

var textBoxList=document.getElementsByClassName（“DISPLAYTYPE”）；
对于（var i=0；i给出您对评论中HTML结构的反馈，您可以使用以下内容来实现您想要实现的目标


您正试图通过使用
var subParam=textBoxList[i].options[textBoxList.selectedIndex].value；
而不是使用
textBoxList[i]
来获取下拉列表的
change
事件中的所选值，您可以使用
this
使我成为
var subParam=this.options[this.selectedIndex].value

要显示隐藏输入，可以使用
函数findRoot（）
，该函数接受目标元素对象，即``select
，并找到名为
rootPlacement`的类的父对象，然后返回节点，然后可以迭代其子对象以显示选定节点并隐藏其余节点


请参见下面的演示


var textBoxList=document.queryselectoral（“.DISPLAYTYPE”）；
对于（变量i=0；i

输入{
显示：无；
}

文本框
复选框
无线电
文本框
复选框
无线电
文本框
复选框
无线电
选择和输入字段布局的实际结构是什么，层次结构可以添加生成的实际代码，选择下拉列表中指定的所有三种类型是否都与上面的选择下拉列表非常接近，而不是其他任何位置？请添加html结构中所有三种输入类型的方式，这是o在选择选项时显示这是将复制并创建更多表单的javascript：。本质上，我将让用户看不到此“QBox”。当他们单击按钮时，此js代码将运行并复制它，并且稍后还会更新id，因此我们将有“QBox1”和“QBox2”等等…好的，但是我怎么知道HTML中使用了
.rootPlacement
元素？最初这3个输入都将被隐藏？编辑显示了.rootPlacement元素将在HTML中使用的位置。是的，这3个输入最初将被隐藏。只有当用户单击按钮时才会发生输入
    var textBoxList = document.getElementsByClassName("DISPLAYTYPE");
         for (var i=0; i<textBoxList.length;i++){
    textBoxList[i].addEventListener('change', function(){

     var subParam = textBoxList[i].options[textBoxList.selectedIndex].value;

     if(subParam ="text"){
        //make ONLY corresponding input box appear
     }else{
     //make ONLY corresponding input box dissapear
     }

  })

 };

[table id="rootPlacement"]

//insert here

[/table]

[button/] <--This will make a duplicate of invisible html and place it under invisible root 



//The invisible html stuff we want to duplicate into //insert here