我知道有人问过类似的问题，但我还没有找到解决方案。

我有一个 sample fiddle使用我已知的一些年、月和日作为样本。我希望 div id 能够根据所选年份的值等动态填充，而不是每年手动添加选择选项 div。

我有来 self 的数据库(php、mysql、cakephp 1.3)的所有下拉选项值。第一个下拉列表包含已输入报告的唯一年份。一旦选择(onchange)，第二个下拉列表将只给出为该选定年份输入报告的唯一月份，然后一旦选择了月份(onchange)，第三个下拉列表将填充每天输入报告的日期。报告从 2011 年 8 月开始，此后不再每月或每天输入。

需要我的 ajax 帮助 将第一个下拉列表中的选定选项发布到我的 Controller ，然后根据发布的值从新查询中获取第二个下拉选项到数据库(模型)。假设用户从第一个下拉列表中选择 2013 年，然后 ajax 将变量中的“2013”​​发送到我的 Controller ， Controller 将值发送到我的模型，我的模型查询数据库以获取 2013 年输入报告的不同月份。由于这一年还没有结束，因此应该出现的月份只有一月到七月。这些填充了我的月份下拉列表，用户在示例中选择了五月。 Ajax 将 May 或“05”发送到 Controller -> 模型，模型查询数据库以获取 2013 年 5 月的唯一日期。这将填充我的第三个下拉列表。我将有一个隐藏的输入字段，它将是从下拉列表中以这种格式选择的所有值:MM/DD/YYYY。当用户提交时，这会将用户重定向到该日期的报告页面并显示当天输入的所有记录。

感谢您的帮助...

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

-- 这是我的 jQuery，但它不起作用...$.get 需要从我的模型中获取值，索引只是 iframes 我页面的新迭代。

    $(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();
}

-- 这是我从 View 中摘录的实际表单，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 -->

最佳答案

你应该做的是:

1. 将更改事件附加到每个下拉列表 - 或至少前两个。

2. 在发生更改事件时，对服务器进行 AJAX 调用(传递一些参数)并使用服务器返回的内容重新填充下一个选择框。这里的“技巧”是您必须独自考虑如何传递参数(GET、POST)以及如何创建选择框 HTML。

3. AJAX 调用完成并返回数据后，您需要填充下一个选择。在这里，您可以让服务器为选择发送准备好的 HTML，或者获取数据并构建标记客户端。预呈现发送的 HTML 应该更好。

4. 对下一个下拉菜单重复该过程。

关于php - 根据之前的下拉选择动态填充最多 3 个下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16679492/