应显示下拉选项，具体取决于之前的选项

Question

        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选项，则应显示上述部门。但是如果我选择Principal选项，则部门选项不应该出现（显示）。 Javascript有点令人困惑，我需要帮助。

Answer 1

吹这段代码：

<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

Answer 2

尝试使用显示 block和none完成相关操作：在您的选择框中添加ID以使用此功能，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"){
    	 document.getElementById("pepartments").style.display = 'block';
     }else{
    	 document.getElementById("pepartments").style.display ="none";
     }
   });


    
 </script>  

Answer 3

首先，你的问题不明确。如果在第一个下拉框中选择了原则选项，我会根据您之前的评论假设您要隐藏下拉框。这是你简单的答案。

＆＃13;

＆＃13;

         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"){
        	 document.getElementById("pepartments").style.display = 'block';
         }else{
        	 document.getElementById("pepartments").style.display ="none";
         }
     }


    
 </script>  

＆＃13;

＆＃13;

＆＃13;