【发布时间】：2013-05-16 18:43:37
【问题描述】：
我知道有人问过类似的问题，但我没有找到解决方案。
我有一个sample fiddle，使用我已知的一些年、月和日作为样本。而不是手动添加每年的选择选项 div，我希望 div id 根据所选年份的值动态填充，依此类推。
我的数据库中有所有下拉选项值（php、mysql、cakephp 1.3）。第一个下拉列表包含已输入报告的唯一年份。一旦选择（onchange），第二个下拉列表将仅给出为该选定年份输入报告的唯一月份，然后一旦选择了月份（onchange），第三个下拉列表将填充输入报告的每一天的日期。报告于 2011 年 8 月开始，此后每月或每天都没有输入。
在我的 ajax 方面需要帮助将所选选项从第一个下拉列表发布到我的控制器，然后根据发布的值从新查询中获取第二个下拉选项到 db（模型）。假设用户从第一个下拉列表中选择 2013，然后 ajax 将变量中的“2013”发送到我的控制器，控制器将值发送到我的模型，我的模型查询数据库以获取 2013 年输入报告的不同月份。由于这一年还没有结束，应该出现的唯一月份是 1 月到 7 月。这些填充了我的月份下拉列表，并且用户在示例中选择了 May。 Ajax 将 May 或“05”发送到控制器 -> 模型，模型查询数据库以获得 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();
}
-- 这是我从视图中摘录的实际表单，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 -->
【问题讨论】：
-
我的 url 应该是控制器而不是视图吗？
-
如果可以的话，我会尽量避免下拉。我听说过很多关于这类事情的反下拉用户体验情绪。日历小部件怎么样？
-
下拉列表由输入报告的年、月和天填充，并且每年、每个月或每天都没有输入报告。我认为日历小部件不是一个好的解决方案。
-
如果您只是获取所有报告的日期，您可以在日历中突出显示报告填写的每一天。用户可以根据需要来回跳过月份和年份。注意：我只是获取日期/ID/名称而不是所有报告对象。如果你真的想使用下拉菜单，你可以做同样的事情。我建议预取所有日期。
-
您是否有一些此类日历小部件的代码示例，这些示例可能会使未报告的日期变灰或减少。然后我需要表单选择提交的任何日期，以便它调用一个包含当天所有报告的新页面。
标签： php javascript ajax jquery cakephp-1.3