Chrome/IE中未触发下拉JavaScript onClick事件

这在chrome和IE中不起作用。我不太擅长Javascripting，所以我不知道该找什么。那么我该怎么做才能让这一切顺利进行呢？我在这里寻找一些解决办法，但运气不好

Javascript代码：

function show(id) {
    var element = document.getElementById(id);
    element.style.display = "";
}

function hide(id) {
    var element = document.getElementById(id);
    element.style.display  = "none";
}

function hideAll() {
    hide('child1');
    hide('child2');
    hide('child3');
    hide('child4');
    hide('child5');
}

HTML代码

    <select name="parent" id="parent">
<option value="0" selected>Please choose</option>
<option value="1" onclick="hideAll(); show('child1');">Parent 1</option>
<option value="2" onclick="hideAll(); show('child2');">Parent 2</option>
<option value="3" onclick="hideAll(); show('child3');">Parent 3</option>
<option value="4" onclick="hideAll(); show('child4');">Parent 4</option>
<option value="5" onclick="hideAll(); show('child5');">Parent 5</option>
</select>
</p>
<select name="child1" id="child1" style="display:none">
<option value="1">Child1 - 1</option>
<option value="2">Child1 - 2</option>
<option value="3">Child1 - 3</option>
<option value="4">Child1 - 4</option>
<option value="5">Child1 - 5</option>
</select>
<select name="child2" id="child2" style="display:none">
<option value="1">Child2 - 1</option>
<option value="2">Child2 - 2</option>
<option value="3">Child2 - 3</option>
<option value="4">Child2 - 4</option>
<option value="5">Child2 - 5</option>
</select>
<select name="child3" id="child3" style="display:none">
<option value="1">Child3 - 1</option>
<option value="2">Child3 - 2</option>
<option value="3">Child3 - 3</option>
<option value="4">Child3 - 4</option>
<option value="5">Child3 - 5</option>
</select>
<select name="child4" id="child4" style="display:none">
<option value="1">Child4 - 1</option>
<option value="2">Child4 - 2</option>
<option value="3">Child4 - 3</option>
<option value="4">Child4 - 4</option>
<option value="5">Child4 - 5</option>
</select>
<select name="child5" id="child5" style="display:none">
<option value="1">Child5 - 1</option>
<option value="2">Child5 - 2</option>
<option value="3">Child5 - 3</option>
<option value="4">Child5 - 4</option>
<option value="5">Child5 - 5</option>
</select>

请选择
父1
家长2
家长3
家长4
家长5

儿童1-1
儿童1-2
儿童1-3
儿童1-4
儿童1-5
儿童2-1
儿童2-2
儿童2-3
儿童2-4
儿童2-5
儿童3-1
儿童3-2
儿童3-3
儿童3-4
儿童3-5
儿童4-1
儿童4-2
儿童4-3
儿童4-4
儿童4-5
儿童5-1
儿童5-2
儿童5-3
儿童5-4
儿童5-5

试试这个

 <select name="parent" id="parent" onChange="showHide(this.id)">

      function showHide(id)
     {
        hideAll();
       var elementId = document.getElementById(id).value ;
       document.getElementById("child"+elementId).style.display= "block";

     }

函数showHide（id）
{
希德尔（）；
var elementId=document.getElementById（id）.value；
document.getElementById（“child”+elementId）.style.display=“block”；
}

您需要使用onchange而不是onclick

这是一个完整的解决方案，只要父选择的值与要隐藏和显示的选择的ID匹配，它就不关心ID是什么

window.onload=function（）{
document.getElementById（“disc”）.onchange=function（）{
希德尔（这个）；
var id=这个值；
如果（id）显示（id）；
}
}
功能显示（id）{
var el=document.getElementById（id）；
如果（el）el.style.display=“block”；
else警报（“无“+ID”等ID）；
}
函数隐藏（id）{
var el=document.getElementById（id）；
el.style.display=“无”；
}
函数hideAll（sel）{
var allSels=document.getElementsByTagName（“选择”）；
对于（变量i=0；请定义“不工作”在这里的任何浏览器中，它的行为是否符合您的预期：当我选择父1、子1弹出窗口时，但它在Opera中确实如此。您可能需要考虑使用像jQuery这样的JavaScript框架来执行这样的TaskSeRE选择值，作为1，2，3，4。“child1，child2……在此之前，我们隐藏了所有有效的元素。但是，如果我选择一个孩子，然后弹出另一个孩子，我该怎么做？如果我更改了父项，我该如何隐藏第一个选择的？this.id不是您想要传递的。传递它并使用它的值nice。但是如果我要更改为“Discraft”我怎么能隐藏第二个呢？我不想在每次从数据库中取出它时都写下来。所以请在规格中更加清楚。使用document.getElementsByTagName（“选择”）使用这样的循环隐藏除父对象之外的所有对象，但当我选择DX时，它必须在下面弹出？有没有办法将idx转换为php字符串？当然可以。Ajax或提交表单
window.onload=function() {
  document.getElementById("disc").onchange=function() {
    hideAll(this); 
    var id = this.value;
    if (id) show(id);
  }
}

function show(id) {
    var el = document.getElementById(id);
    if (el) el.style.display = "block";
    else alert("No such ID as "+id);
}

function hide(id) {
    var el = document.getElementById(id);
    el.style.display  = "none";
}

function hideAll(sel) {
  var allSels=document.getElementsByTagName("select");
  for (var i=0;i<allSels.length;i++) {
      if (allSels[i]!=sel) {
          console.log(allSels[i].id)
          allSels[i].style.display='none';
      }    
  }
}