如何在另一個選擇列表中進行選擇後顯示/隱藏選擇列表？

Question

我有一個選擇列表，看起來像這樣的時刻：

現在我想第二個選擇列表僅顯示了當選擇/更改已在第一選擇列表中進行。當選擇/更改第二個時，我想要顯示第三個+第四個選擇列表。

這是選擇列表的代碼：

<div class="row"> 
    <div id="content-a"> 
     <div class='content-row'> 
      <div class="select_1 col-md-12"> 
       <span> 
        <select class="form-control" name="table_names" id="slctTable"> 
        </select> 
       </span>  
      </div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="select_2 col-md-12"> 
     <span> 
      <select class="form-control" name="column_names" id="slctField"> 
      </select> 
     </span>  
    </div> 
</div> 
<div class="row"> 
    <div class="select_3 col-md-3"> 
     <span> 
      <select class="form-control" name="comparisonOperators" id="slctOperator"> 
      </select> 
     </span>  
    </div> 
    <div class="select_4 col-md-9"> 
     <span> 
      <select class="form-control" name="attribute_names" id="slctAttribute"> 
      </select> 
     </span>  
    </div> 
</div> 

Answer 1

你總是可以嘗試jQuery的隱藏/顯示元素

像這樣具有成才觀看您的變化

$(".slctTable").on('change', function(){ 
    $('.select_2').show(); 
}) 

或者您可以檢查第一選擇中的值是未定義的還是空的 第一隱藏其他元素與（jQuery的）或CSS

.select_2 { 
    display: none; 
} 
.select_3 { 
    display: none; 
} 

，然後，如果第一選擇是不是未定義或空展再展選擇

Answer 2

您可以使用下面提到鏈接的東西。

Dependent Dropdown

Dropdown List Plugin

Answer 3

試試這個code.You可以使用JQuery做。 需要將id添加到第二和第三行。現在首先改變選擇顯示的第二選擇行（Id="step2"）等等...

$(document).ready(function(){ 
 

 
    jQuery(document).on('change','#slctTable',function() { 
 
    jQuery("#step2").show(); 
 
    }); 
 
    jQuery(document).on('change','#slctField',function() { 
 
    jQuery("#step3").show(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <div class="row"> 
 
    <div id="content-a"> 
 
     <div class='content-row'> 
 
      <div class="select_1 col-md-12"> 
 
       <span> 
 
        <select class="form-control" name="table_names" id="slctTable"> 
 
\t \t \t \t \t <option>Select First</option> \t <option>1</option> \t \t 
 
        </select> 
 
       </span>  
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="row" id="step2" style="display: none;"> 
 
    <div class="select_2 col-md-12"> 
 
     <span> 
 
      <select class="form-control" name="column_names" id="slctField"> 
 
\t \t \t <option>Select Second </option><option>2</option> \t 
 
      </select> 
 
     </span>  
 
    </div> 
 
</div> 
 
<div class="row" id="step3" style="display: none;"> 
 
    <div class="select_3 col-md-3"> 
 
     <span> 
 
      <select class="form-control" name="comparisonOperators" id="slctOperator"> 
 
       \t \t <option>3</option> \t 
 
      </select> 
 
     </span>  
 
    </div> 
 
    <div class="select_4 col-md-9"> 
 
     <span> 
 
      <select class="form-control" name="attribute_names" id="slctAttribute"> 
 
       \t \t <option>4</option> \t 
 
      </select> 
 
     </span>  
 
    </div> 
 
</div>

Answer 4

我真的不明白你是什麼意思顯示，但是如果你希望你的列表在第一次選擇後被選中，請使用XmlHttp請求。

一個小例子：

xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange=function(){ 
    if(xmlhttp.readyState==4 && xmlhttp.status==200) 
     //TODO 
} 
xmlhttp.open("GET", "your_request_page.php", true); 
xmlhttp.send();