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

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

Вот как все выпадающие списки выглядят без 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>

Is there any way to make this possible?

Спасибо за ваше время и помощь!


javascript html jquery cascadingdropdown
person J1Ronnie    schedule 07.12.2015    source источник
comment
Да, это можно сделать с помощью JavaScript, который вы не опубликовали. Кроме того, PHP не имеет отношения к вашему вопросу, поэтому вам следует удалить тег и опубликовать свой отображаемый HTML.   -  person j08691    schedule 07.12.2015
comment
Вероятно, вы хотите изучить Ajax и создать отдельные сценарии для возврата каждого раскрывающегося списка или одного другого сценария, где вы даете ему параметр, указывающий, какой раскрывающийся список должен предоставляться вам при отправке запроса Ajax.   -  person developerwjk    schedule 07.12.2015
comment
fwiw Я ненавижу, когда веб-сайты делают это. просто покажи мне всю форму.   -  person chiliNUT    schedule 08.12.2015

Ответы (1)


arrow_upward
1
arrow_downward

Я бы запустил что-то в 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/

person redreddington    schedule 07.12.2015