Создание каскадной группы выпадающего списка

Question

Я пытаюсь создать группу выпадающих списков, чтобы создать «поиск». Каждый выпадающий список должен быть скрыт до тех пор, пока не будет выбран предыдущий раскрывающийся список. Значение предыдущего выбора не имеет значения для значений в следующем раскрывающемся списке. Они должны быть просто скрыты, если предыдущее раскрывающееся меню все еще находится в значении по умолчанию. Есть ли способ сделать это возможным? Мне удалось скрыть второе раскрывающееся меню, но с третьего и вперед, я не смог заставить их отображаться динамически.

Вот как все выпадающие выглядеть без CSS:

Я хотел бы иметь каждый выпадающий список после того, как «Год», чтобы быть скрыты, и после каждого выпадающего списка, следующий появится.

Это мой текущий код:

 <form name="ftpquery" method="post" action="sendFTP.php"> 
     <select name="year"> 
      <option value="">Year</option> 
      <?php for($i = 1992; $i < 2016; $i++) { ?> 
      <option value = "<?php echo $i; ?>"><?php echo $i; ?></option>; 
      <?php } ?> 
     </select> 

     <select name = "julian"> 
      <option value = "">Julian</option> 
      <?php 
       for($i = 1; $i < 366; $i++){ 
      ?> 
      <option value = "<?php echo $i ?>"><?php echo $i ?></option>; 
      <?php } ?> 
     </select> 

     <select name = "station"> 
      <option value = "">Station</option> 
      <?php 
      while ($row = mysqli_fetch_array($response)){ 
      ?> 
      <option value = "<?php echo $row['Station'] ?>"><?php echo $row['Station'] ?></option>; 
      <?php } ?> 
     </select> 

     <select name = "month"> 
      <option value = "">Month</option> 
      <?php 
      for($i = 1; $i < 13; $i++){ 
      ?> 
      <option value = "<?php echo $i ?>"><?php echo $i ?></option>; 
      <?php } ?> 
     </select> 

     <select name = "day"> 
      <option value = "">Day</option> 
      <?php 
      for($i = 1; $i <= 31; $i++){ 
      ?> 
      <option value = "<?php echo $i ?>"><?php echo $i ?></option>; 
      <?php } ?> 
     </select> 

     <select name = "hour"> 
      <option value = "">Hour</option> 
      <?php 
      for($i = 0; $i <= 23; $i++){ 
      ?> 
      <option value = "<?php echo $i ?>"><?php echo $i ?></option>; 
      <?php } ?> 
     </select> 
     <select name = "min"> 
      <option value = "">Min</option> 
      <option value = "00"><?php echo "00" ?></option>; 
      <option value = "15"><?php echo "15" ?></option>; 
      <option value = "30"><?php echo "30" ?></option>; 
      <option value = "45"><?php echo "45" ?></option>; 
     </select> 

     <select name = "version"> 
      <option value = "">Version</option> 
      <option value = "a"><?php echo "a" ?></option>; 
      <option value = "b"><?php echo "b" ?></option>; 
     </select> 

     <p> 
     <input type="submit" value="Submit"> 
     </p> 
    </form> 
    </body> 

Есть ли способ, чтобы сделать это возможным?

Благодарим вас за внимание и помощь!

Answer 1

Я бы запустить что-то в JQuery, как это:

<style> 
    select.date-select { 
     display: none; 
    } 
</style> 

<script type="text/javascript"> 
function selectShowHide() 
{ 
    // Loop through all the .date-select selects 
    $("select.date-select").each(function() { 
     if ($(this).val() == 0) { 
      // If it has no value hide it 
      $(this).next("select.date-select").hide(); 
     } else { 
      // If it does show it 
      $(this).next("select.date-select").show(); 
     } 
    }); 
} 

$(function(){ 
    // On load activate the show hide 
    selectShowHide(); 

    // Show the first one 
    $("select.date-select").first().show(); 

    // On change of select work out what to hide 
    $("select.date-select").change(function(){ 
     selectShowHide(); 
    }); 
}); 

</script> 

Вы должны были бы отдать все ваши выбирает класс финиковая выберите:

<select class="date-select"> 

</select> 

И скрипку: http://jsfiddle.net/hnwLqo7h/