Dynamically populate up to 3 dropdowns based on previous dropdown selections

Question

I know similar questions have been asked but I have not found a solution.

I have a sample fiddle using some of my known years, months and days as a sample. Instead on manually adding select option divs for each year, I'd like the div id to dynamically populate based on the value of the year selected and so on.

I have all dropdown option values from my database (php, mysql, cakephp 1.3). The first dropdown contains unique years that reports have been entered. Once selected (onchange) perhaps, the second dropdown will only give unique Months that reports were entered for that selected year and then once the month is selected (onchange) a third dropdown will populate with the dates of each day a report was entered. Reports started in August of 2011 and have not been entered every month nor every day since.

Need help with my ajax to post selected option from first dropdown list to my controller, then get 2nd dropdown options from new query to db (model) based on the posted value. Let's assume user selects 2013 from the first dropdown, then ajax sends "2013" in a variable to my controller, the controller sends value to my Model and my Model queries the database to get distinct months within 2013 where reports where entered. And since the year is not over, the only months that should appear are January thru July. These populate my months dropdown and the user selects May in example. Ajax sends May or "05" to controller -> Model and the model queries DB to get unique days in May, 2013. This populates my third dropdown. I will have a hidden input field that will be all the selected values from the dropdowns in this format: MM/DD/YYYY. When user submits, this redirect user to the reports page for that date and shows all records entered on that day.

Thanks for helping...

    <select name="drop_1" id="drop_1">
        <option value="" selected="selected" disabled="disabled">Choose Year</option>
        <option value="">Select Year</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
    </select>

    <select name="drop_2" id="drop_2">
        <option value="" selected="selected" disabled="disabled">Choose Month</option>
        <option value=""></option>
        <option value="01">January</option>
        <option value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
    </select>

     <select name="drop_3" id="drop_3">
        <option value="" selected="selected" disabled="disabled">Choose Day</option>
        <option value=""></option>
        <option value="05/11/2013">05/11/2013</option>
        <option value="05/12/2013">05/12/2013</option>
        <option value="05/13/2013">05/13/2013</option>
    </select>

-- this is my jQuery but it is not working...the $.get needs to get the value from my Model, index just iframes a new iteration of my page.

    $(document).ready(function() {
    $('#wait_1').hide();
    $('#drop_1').change(function(){
      $('#wait_1').show();
      $('#result_1').hide();
      $.get("index", {  
        func: "drop_1",
        drop_var: $('#drop_1').val()
      }, function(response){
        $('#result_1').fadeOut();
        setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
      });
        return false;
    });
});

function finishAjax(id, response) {
  $('#wait_1').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
function finishAjax_tier_three(id, response) {
  $('#wait_2').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}

-- here's my actual form excerpt from the view, "index" in cakephp 1.3

<div>
    <!-- Begin Date Selection -->
    <form name="udate" action="/reports/daily/" method="post">
    <?php
    echo "<select id='drop_1' name='drop_1' title='Use the drop list'>";
    echo '<option value="" disabled="disabled" selected="selected">'."Choose Year".'</option>';
        foreach ($years as $select_year) 
        {
        echo '<option value="', $select_year[0]["Year(dated)"], '">', $select_year[0]["Year(dated)"], '</option>';
        }
    echo "</select>";?>

    <?php
    echo "<select name='drop_2' id='drop_2' title='Use the drop list'>";
    echo '<option value="" disabled="disabled" selected="selected">'."Choose Month".'</option>';
        foreach ($months as $select_month) 
        {
        echo '<option value="', $select_month[0]["Month(dated)"], '">', $select_month[0]["Month(dated)"], '</option>';
        }
    echo "</select>";
    echo "<script type=\"text/javascript\">
    $('#wait_2').hide();
        $('#drop_2').change(function(){
          $('#wait_2').show();
          $('#result_2').hide();
          $.get(\"index\", {
            func: \"drop_2\",
            drop_var: $('#drop_2').val()
          }, function(response){
            $('#result_2').fadeOut();
            setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
          });
            return false;
        });
    </script>";?>

    <?php
    echo "<select id='drop_3' name='drop_3' title='Use the drop list'>";
    echo '<option value="" disabled="disabled" selected="selected">'."Choose Day".'</option>';
        foreach ($days as $select_item) 
        {
        echo '<option value="', $select_item[0]["Days(dated)], '">', $select_item[0]["Days(dated)], '</option>';
        }
    echo "</select>";?>
  <span id="wait_1" style="display: none;">
    <img alt="Please Wait" src="http://dev.asi.calpoly.edu/img/ajax-loader.gif"/>
</span>
<span id="result_1" style="display: none;"></span>
<span id="wait_2" style="display: none;">
<img alt="Please Wait" src="http://dev.asi.calpoly.edu/img/ajax-loader.gif"/>
</span>
<span id="result_2" style="display: none;"></span> 
            <?php echo $form->submit('Submit') ?>
        </form>
    </div><!-- End Date Selection -->

Answer 1

What you should do is:

1. Attach change events to each dropdown - or at least the first two.

2. On a change event occuring make an AJAX call to the server (passing some params) and repopulate the next selectbox with what the server returns. The "trick" here is that you alone have to deside how to pass the parameters (GET, POST) and how to create the selectbox HTML.

3. After the AJAX call completes and returns the data, you need to populate the next select. Here you can either have the server send ready HTML for the selects or get the data and build the markup client side. It should be better to have the HTML sent prerendered.

4. Repeat the procedure for the next dropdown.