Dropdown JavaScript onClick事件在Chrome/IE中未觸發

Question

這不適用於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> 

Answer 1

您需要使用的onchange代替的onclick

下面是一個完整的解決方案， d OES不在乎什麼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"; 

    }