下拉选项应显示取决于以前的选项

问题描述：

 Designation<br> 
     <select><br> 
      <option value="hod">HOD</option> 
      <option value="principal">Principal</option> 
      </select><br><br> 

     Department<br> 
      <select> 
      <option value="architecture">Architecture</option> 
      <option value="biotech">Bio-Technology</option> 
      <option value="chemical">Chemical Engineering</option> 
      <option value="chemistry">Chemistry</option> 
      <option value="civil">Civil Engineering</option> 
      <option value="computerapp">Computer Applications</option> 
      <option value="computerscience">Computer Science and Engineering</option> 
      <option value="CSE">Electricals and Electronics</option> 
      <option value="CSE">Electronics and Communication Engineering</option> 
      <option value="CSE">Information Science and Engineering</option> 
      <option value="CSE">Instrumentation and Electronics Engineering</option> 
      <option value="CSE">Management Studies and Research Center</option> 
      <option value="CSE">Mathematics</option> 
      <option value="CSE">Mechanical Engineering</option> 
      <option value="CSE">Medical Electronics</option> 
      <option value="CSE">Physics</option> 
      <option value="CSE">Telecommunication Engineering</option>    
      <option value="CSE">Physical education and Sports Sciences </option> 
     </select>

如果我选择HOD选项上面的部门应该显示。但是，如果我选择选项主体部门选项不应该来（显示）。 Javascript有点混乱，我需要帮助。下拉选项应显示取决于以前的选项

没有HOD选项。 –

我编辑了这个问题。请检查。 –

答

的第一件事是你的问题不明确。如果在第一个下拉框中选择原则选项，我假设您想要隐藏的以前的评论下拉框。这里是你的简单答案。

  Designation<br> 
 
     <select id="designation" onchange="showDropDown()"><br> 
 
      <option value="hod">HOD</option> 
 
      <option value="principal">Principal</option> 
 
      </select><br><br> 
 
     Department<br> 
 
     <select id="pepartments"> 
 
      <option value="architecture">Architecture</option> 
 
      <option value="biotech">Bio-Technology</option> 
 
      <option value="chemical">Chemical Engineering</option> 
 
      <option value="chemistry">Chemistry</option> 
 
      <option value="civil">Civil Engineering</option> 
 
      <option value="computerapp">Computer Applications</option> 
 
      <option value="computerscience">Computer Science and Engineering</option> 
 
      <option value="CSE">Electricals and Electronics</option> 
 
      <option value="CSE">Electronics and Communication Engineering</option> 
 
      <option value="CSE">Information Science and Engineering</option> 
 
      <option value="CSE">Instrumentation and Electronics Engineering</option> 
 
      <option value="CSE">Management Studies and Research Center</option> 
 
      <option value="CSE">Mathematics</option> 
 
      <option value="CSE">Mechanical Engineering</option> 
 
      <option value="CSE">Medical Electronics</option> 
 
      <option value="CSE">Physics</option> 
 
      <option value="CSE">Telecommunication Engineering</option>    
 
      <option value="CSE">Physical education and Sports Sciences </option> 
 
     </select> 
 
     
 
    <script type="text/javascript"> 
 
    function showDropDown() {  
 
     var seelecDsg = document.getElementById("designation").value; 
 
     if(seelecDsg == "hod"){ 
 
     \t document.getElementById("pepartments").style.display = 'block'; 
 
     }else{ 
 
     \t document.getElementById("pepartments").style.display ="none"; 
 
     } 
 
    } 
 

 

 
    
 
</script>

非常感谢...它也可以。 –

随时欢迎，如果您有任何疑问，请在下面评论。 – user5527963

答

吹验证码：使用显示block和none把它做：添加ID到您的选择框使用此

<span id="dept" style='display:none'>Department</span> 
    <br> 
     <select id="hod" name="HOD"> 
      <option value="architecture">Architecture</option> 
      <option value="biotech">Bio-Technology</option> 
      <option value="chemical">Chemical Engineering</option> 
      <option value="chemistry">Chemistry</option> 
      <option value="civil">Civil Engineering</option> 
      <option value="computerapp">Computer Applications</option> 
      <option value="computerscience">Computer Science and Engineering</option> 
      <option value="CSE">Electricals and Electronics</option> 
      <option value="CSE">Electronics and Communication Engineering</option> 
      <option value="CSE">Information Science and Engineering</option> 
      <option value="CSE">Instrumentation and Electronics Engineering</option> 
      <option value="CSE">Management Studies and Research Center</option> 
      <option value="CSE">Mathematics</option> 
      <option value="CSE">Mechanical Engineering</option> 
      <option value="CSE">Medical Electronics</option> 
      <option value="CSE">Physics</option> 
      <option value="CSE">Telecommunication Engineering</option>    
      <option value="CSE">Physical education and Sports Sciences </option> 
     </select> 
<script> 
    document.getElementById("hod").addEventListener("change", function(){ 
     document.getElementById('dept').style.display = 'block'; 
    }); 
</script>

JsFiddle

这是jquery ...不是JavaScript更新相应的答案。请参阅他的问题。 –

谢谢@Suchit，我编辑过。 – egvrcn

答

尝试，id's将有助于识别出选定盒子uniquely。

  Designation<br> 
 
     <select id="designation"><br> 
 
      <option value="hod">HOD</option> 
 
      <option value="principal">Principal</option> 
 
      </select><br><br> 
 
     Department<br> 
 
     <select id="pepartments"> 
 
      <option value="architecture">Architecture</option> 
 
      <option value="biotech">Bio-Technology</option> 
 
      <option value="chemical">Chemical Engineering</option> 
 
      <option value="chemistry">Chemistry</option> 
 
      <option value="civil">Civil Engineering</option> 
 
      <option value="computerapp">Computer Applications</option> 
 
      <option value="computerscience">Computer Science and Engineering</option> 
 
      <option value="CSE">Electricals and Electronics</option> 
 
      <option value="CSE">Electronics and Communication Engineering</option> 
 
      <option value="CSE">Information Science and Engineering</option> 
 
      <option value="CSE">Instrumentation and Electronics Engineering</option> 
 
      <option value="CSE">Management Studies and Research Center</option> 
 
      <option value="CSE">Mathematics</option> 
 
      <option value="CSE">Mechanical Engineering</option> 
 
      <option value="CSE">Medical Electronics</option> 
 
      <option value="CSE">Physics</option> 
 
      <option value="CSE">Telecommunication Engineering</option>    
 
      <option value="CSE">Physical education and Sports Sciences </option> 
 
     </select> 
 
     
 
<script type="text/javascript"> 
 
    document.getElementById("designation").addEventListener("change", function(){ 
 
    if(this.value == "hod"){ 
 
    \t document.getElementById("pepartments").style.display = 'block'; 
 
    }else{ 
 
    \t document.getElementById("pepartments").style.display ="none"; 
 
    } 
 
    }); 
 

 

 
    
 
</script>

感谢兄弟,,,它的工作.. –

下拉选项应显示取决于以前的选项

相关推荐