CODEWITHSUNDEEP
javascriptjqueryhtmlcascadingdropdown
J1Ronnie
J1Ronnie

Reputation: 73

Creating a cascading dropdown group

I'm trying to create a group of dropdowns to create a "search". Each dropdown should be hidden until the previous dropdown has been selected. The value of the previous selection is irrelevant to the values on the next dropdown. They should only just be hidden if the previous dropdown is still in the default value. Is there any way to make this possible? I've been able to hide the second dropdown but from the third and forward, I haven't been able to make them appear dynamically.

This is how all the dropdowns look without any css: enter image description here

I would like to have every dropdown after "Year" to be hidden, and after each dropdown, the next one would appear.

This is my current code: 

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

Thank you for your time and help!

Upvotes: 0

Views: 146

Answers (1)

redreddington
redreddington

Reputation: 408

I'd run something in jQuery like this:

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

You'd need to give all of your selects a class of date-select:

<select class="date-select">

</select>

And a fiddle: http://jsfiddle.net/hnwLqo7h/

Upvotes: 1

Related Questions