Question

基本上，我想创建一个带有按钮的网站，该按钮反复要求用户输入。但是，网站要求的输入之一涉及一个选择字段，并且取决于选择字段，相应的文本字段会出现或消失（值无）。我的JavaScript使用了for循环，因为用户可以反复按下按钮来添加越来越多的选择字段（以及相应的文本字段）。

这里是jsfiddle

下面是我正在尝试做的示例代码。

HTML

    <div><select class="DISPLAYTYPE" id="QBox" data-fieldtype="P">
                    <option value = "text">TextBox</option>
                    <option value = "check">CheckBox</option>
                    <option value = "radio">Radio</option>
                </select></div>

      <input type="number" min="1" value="LENGTH" class="quantumBox" id="P">

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
     }

  })

 };

编辑：这是结构

[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

Answer 1

鉴于您对注释中HTML结构的反馈，您可以使用以下内容来实现您想要的目标。看看

您正尝试使用change而不是var subParam = textBoxList[i].options[textBoxList.selectedIndex].value;来获取textBoxList[i]下拉列表中的this事件内部的选定值这样我就变成了var subParam = this.options[this.selectedIndex].value。
要显示隐藏的输入，可以使用function findRoot()，它接受目标元素对象，即“ select and finds a parent with the class named rootPlacement`并返回节点，然后可以迭代其子项以显示选定的节点并隐藏其余节点。

查看下面的演示

var textBoxList = document.querySelectorAll(".DISPLAYTYPE");


for (var i = 0; i < textBoxList.length; i++) {
  textBoxList[i].addEventListener('change', function() {

    var selectedType = this.options[this.selectedIndex].value;
    let rootPlacement = findRoot(this, 'rootPlacement');
    let children = rootPlacement.children;

    for (var c = 0; c < children.length; c++) {
      let element = children[c];
      let elementType = element.type;
      let isInputElement = typeof elementType !== 'undefined';

      if (isInputElement) {
        if (elementType == selectedType) {
          element.style.display = 'inline';
        } else {
          element.style.display = 'none';
        }
      }
    }
  });

};

function findRoot(el, cls) {
  while ((el = el.parentElement) && !el.classList.contains(cls));
  return el;
}

input {
  display: none;
}

<div class="rootPlacement">
  <div>
    <select class="DISPLAYTYPE" id="QBox1" data-fieldtype="P">
      <option value="text">TextBox</option>
      <option value="checkbox">CheckBox</option>
      <option value="radio">Radio</option>
    </select>
  </div>

  <input type="text" value="" class="quantumBox" id="P1">
  <input type="checkbox" value="" class="quantumBox" id="q1">
  <input type="radio" value="" class="quantumBox" id="r1">
</div>
<div class="rootPlacement">
  <div>
    <select class="DISPLAYTYPE" id="QBox2" data-fieldtype="P">
      <option value="text">TextBox</option>
      <option value="checkbox">CheckBox</option>
      <option value="radio">Radio</option>
    </select>
  </div>

  <input type="text" value="LENGTH" class="quantumBox" id="P2">
  <input type="checkbox" value="" class="quantumBox" id="q2">
  <input type="radio" value="LENGTH" class="quantumBox" id="r2">
</div>
<div class="rootPlacement">
  <div>
    <select class="DISPLAYTYPE" id="QBox3" data-fieldtype="P">
      <option value="text">TextBox</option>
      <option value="checkbox">CheckBox</option>
      <option value="radio">Radio</option>
    </select>
  </div>

  <input type="text" value="LENGTH" class="quantumBox" id="P3">
  <input type="checkbox" value="" class="quantumBox" id="q3">
  <input type="radio" value="LENGTH" class="quantumBox" id="r3">

</div>

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

1 个答案: