使用JavaScript隐藏下拉菜单时，将其设置为默认值

Question

当选择另一个具有特定值的下拉菜单（我们称其为“主人”）时，我有几个下拉菜单（我们称它们为“孩子”），每个都用javascript显示。 这个javascript效果很好。 现在，我希望将特定的子项设置为特定的值后，当选择母版的另一个值时，该子项返回到其默认值。

到目前为止我的代码：

  // On every 'Change' of the drop down with the ID "TailleSelector" call the displayTextField function
  document.getElementById("TailleSelector").addEventListener("change", displayTextField);
    function displayTextField() {
      // Get the value of the selected drop down
      var dropDownText =  document.getElementById("TailleSelector").value;
      // If selected text matches 'value', display the text field.
      if (dropDownText == "1 à 2") {
        document.getElementById("TailleBacGris12").style.display = 'block';
      } else {
        document.getElementById("TailleBacGris12").style.display = 'none';
        document.getElementById("TailleBacGris12").value = '-';
      }
    }

最后一个getElementById（在一个隐藏第一个孩子下拉菜单之后）不起作用，当我更改主值时，该值未设置为'-'。

关于如何进行这项工作的任何提示？

谢谢 ！

编辑

在按照评论中的要求检查HTML的同时，我发现了我的错误……可耻！

用来隐藏下拉菜单的ID调用是包含选择内容的段落之一。 给选择一个ID并在上面的js中调用它，可以在选择隐藏时为选择赋予正确的值。

我的坏人，非常感谢您的帮助。

Answer 1

正如我在评论中所述-将项目文本分配给下拉菜单的值不是在下拉菜单中选择该项目的正确方法。

这是带有示例的代码段-第一个按钮像在OP中一样分配文本，另一个按钮按文本搜索项目，然后将其索引分配给.selectedIndex属性，这是正确的方法。

 function click(){ myDD.value="1"; } function click2(){ for (i=0;i<myDD.options.length;i++){ if (myDD.options[i].text == "2"){ myDD.selectedIndex = i; } } } 

 <select id="myDD"> <option selected>-</option> <option>1</option> <option>2</option> <option>3</option> </select> <input type="button" onClick="click()" value="Assign Text" /> <input type="button" onClick="click2()" value="Right way" /> 

PS，当您为元素指定了id时，无需调用document.getElementById()函数，您可以仅通过id引用它，就好像它被声明为变量一样。