如何在另一个选择列表中进行选择后显示/隐藏选择列表？

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();