同様の質問が寄せられていることは知っていますが、解決策が見つかりません。
サンプルとして、既知の年、月、日の一部を使用したサンプル フィドルがあります。年ごとに選択オプションの div を手動で追加する代わりに、選択した年の値などに基づいて div id を動的に設定したいと思います。
データベース (php、mysql、cakephp 1.3) のすべてのドロップダウン オプション値があります。最初のドロップダウンには、レポートが入力された一意の年が含まれています。おそらく選択すると (onchange)、2 番目のドロップダウンは、選択した年にレポートが入力された一意の月のみを表示し、月が選択されると (onchange)、3 番目のドロップダウンには、レポートが入力された各日の日付が入力されます。レポートは 2011 年 8 月に開始されて以来、毎月も毎日も入力されていません。
私のajaxで助けが必要最初のドロップダウン リストから選択したオプションをコントローラーに投稿し、投稿された値に基づいて新しいクエリから db (モデル) に 2 番目のドロップダウン オプションを取得します。ユーザーが最初のドロップダウンから 2013 を選択すると、ajax が変数で "2013" をコントローラーに送信し、コントローラーが値をモデルに送信し、モデルがデータベースにクエリを実行して、レポートが入力された 2013 内の異なる月を取得するとします。そして、年はまだ終わっていないので、表示されるのは 1 月から 7 月までの月だけです。これらは私の月のドロップダウンに入力され、ユーザーは例で 5 月を選択します。Ajax は 5 月または "05" をコントローラー -> モデルに送信し、モデルは DB にクエリを実行して 2013 年 5 月の一意の日付を取得します。これにより、3 番目のドロップダウンが読み込まれます。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 はモデルから値を取得する必要があり、ページの新しいイテレーションを単に iframe にインデックス付けします。
$(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 の "index" ビューからの実際のフォームの抜粋です。
<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 -->