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

Question

这在 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>

Answer 1

你需要使用onchange而不是onclick

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

demo

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';
      }    
  }
}

Answer 2

试试这个

 <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";

     }