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

【问题标题】：How to show/hide a select list after the selection in another select list is made?在另一个选择列表中进行选择后如何显示/隐藏选择列表？
【发布时间】：2016-06-07 13:05:39
【问题描述】：

我现在有一个看起来像这样的选择列表：

现在我希望第二个选择列表仅在对第一个选择列表进行选择/更改时显示。当对第二个进行选择/更改时，我希望显示第三个+第四个选择列表。

这是选择列表的代码：

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

【问题讨论】：

你应该把它放在一个jsfiddle中，这样人们就可以直接编辑它

标签： javascript jquery html show-hide selectlist

【解决方案1】：

您总是可以尝试使用 jQuery 隐藏/显示元素

所以有一些东西要注意你的变化

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

或者您可以检查第一个选择中的值是否未定义或为空首先用 (jQuery) 或 CSS 隐藏其他元素

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

然后如果第一个选择器不是未定义或为 Null 则显示 THEN 显示选择器

【讨论】：

【解决方案2】：

您可以使用下面提到的链接中的某些内容。

Dependent Dropdown

Dropdown List Plugin

【讨论】：

【解决方案3】：

试试这个代码。你可以使用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>
	<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">
					<option>Select First</option>	<option>1</option>		
                    </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">
			<option>Select Second  </option><option>2</option>	
            </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">
              		<option>3</option>	
            </select>
        </span>    
    </div>
    <div class="select_4 col-md-9">
        <span>
            <select class="form-control" name="attribute_names" id="slctAttribute">  
              		<option>4</option>	
            </select>
        </span>    
    </div> 
</div>

【讨论】：

【解决方案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();

【讨论】：