根據javascript中的選擇選項顯示/隱藏div

搜索了互聯網。學習如何做到這一點。實施它。但它不起作用。我想選擇學生時顯示div學生，選擇教師時顯示div教師。這是一個jsp文件的一部分。根據javascript中的選擇選項顯示/隱藏div

HTML代碼：

<table> 
    <tr> 
     <td> 
     <select id="userType"> 
      <option value="student">STUDENT</option> 
      <option value="teacher">TEACHER</option> 
      <option value="admin">ADMIN</option> 
     </select> 
     </td> 
    </tr> 
<table>

Javascript代碼：

<script type="text/javascript"> 

    var elem = document.getElementById('userType'); 
    elem.onchange = function() { 
     var studentDiv = document.getElementById('student'); 
     var teacherDiv = document.getElementById('teacher'); 
     studentDiv.style.display = (this.value.equals("student")) ? 'block':'none'; 
     teacherDiv.style.display = (this.value.equals("teacher")) ? 'block':'none'; 
    }; 

</script>

我一直試圖讓從早上這個權利。嘗試了其他方法。什麼都沒有我究竟做錯了什麼？

來源

2016-05-01 Samrat Dutta

https://jsfiddle.net/q9Lx2ffn/ – Ashraf

你的解決方案有一些問題，並在控制檯拋出錯誤。在瀏覽器開發工具中調試這些。這就是如何學習如何做到這一點。 –

你可能會選擇的選項的值象下面這樣：

JSFIDDLE

<script type="text/javascript"> 

    var elem = document.getElementById('userType'); 
    elem.onchange = function() { 
     var studentDiv = document.getElementById('student'); 
     var teacherDiv = document.getElementById('teacher'); 
     studentDiv.style.display = this.options[this.selectedIndex].value == "student" ? 'block':'none'; 
     teacherDiv.style.display = this.options[this.selectedIndex].value == "teacher" ? 'block':'none'; 
    }; 

</script>

來源

2016-05-01 17:34:54

變化equals在代碼中==和它的作品DEMO

var elem = document.getElementById('userType'); 
elem.onchange = function() { 
    var studentDiv = document.getElementById('student'); 
    var teacherDiv = document.getElementById('teacher'); 
    studentDiv.style.display = (this.value == "student") ? 'block' : 'none'; 
    teacherDiv.style.display = (this.value == "teacher") ? 'block' : 'none'; 
};

來源

2016-05-01 17:34:58

爲什麼使用jsfiddle時，你可以在答案中包含一個片段9_9 – Sumurai8

我也試過這個。是的，它可以在jfiddle中運行。它應該無處不在。但是出於一些非常奇怪的原因，這在我的電腦上不起作用。我不知道爲什麼。我試着用Firefox和Chrome打開這個文件。如果樣式顯示設置爲無，則更改選擇後不顯示任何內容。如果我刪除樣式屬性，則會顯示教師和學生，即使選擇了不同的選項。這沒有意義。代碼應該工作。這絕不會發生。 –

如果你的js代碼是在單獨的文件中，請確保你包含它正確，也可以用這個'HTML'代碼https://jsfiddle.net/Lg0wyt9u/721/ –

試這

studentDiv.style.display = (this.value==="student") ? 'block':'none'; 
teacherDiv.style.display = (this.value==="teacher") ? 'block':'none';

來源

2016-05-01 17:38:23 urvashi

兩個問題立刻蹦出：

您正在試圖選擇一個沒有定義ID的項目。您正在調用元素值屬性中不存在的「.value」。

這些錯誤將在您的瀏覽器開發人員工具中報告。使用它們。

來源

2016-05-01 17:48:09

根據javascript中的選擇選項顯示/隱藏div

回答

相關問題