下拉选项应根据上一个选项显示

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

         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>  

吹这个代码：

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

小提琴

尝试使用显示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>