下拉JavaScript的onClick事件不触发Chrome/IE

Dropdown JavaScript onClick event not firing in Chrome/IE

本文关键字：Chrome IE JavaScript onClick 事件 下拉      更新时间：2023-09-26

这在chrome和IE中不起作用。我不太擅长javascript，所以我不知道该找什么。那么我该怎么做才能让它成功呢?我一直在这里寻找解决办法，但是没有运气。

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>

你需要使用onchange而不是onclick

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

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

try this

 <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";
     }
相关文章：