根据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

回答

相关问题