Как показать/скрыть список выбора после выбора в другом списке выбора?

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

а затем, если первый селектор НЕ неопределенный или Null шоу ТОГДА показать селекторы

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

Я не очень понимаю, что вы имеете в виду show, но если вы хотите, чтобы ваш список был заполнен после выбора в вашем первом выборе, используйте XmlHttp Request.

Небольшой пример:

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