下拉選項應顯示取決於以前的選項

 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有點混亂，我需要幫助。下拉選項應顯示取決於以前的選項

來源

2015-11-05 Prashanth T

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

來源

2015-11-05 09:01:13 user5527963

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

隨時歡迎，如果您有任何疑問，請在下面評論。 – 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

來源

2015-11-05 08:17:50 egvrcn

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

來源

2015-11-05 08:23:42

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

下拉選項應顯示取決於以前的選項

回答

相關問題