根据之前的下拉选项动态填充最多3个下拉菜单

时间：2013-05-21 21:07:24

标签： php javascript ajax jquery cakephp-1.3

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

我有一个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”发送给控制器 - ＆gt;模型和模型查询DB以获得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中的“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 -->

6 个答案:

答案 0 :(得分：2)

你应该做的是：

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

  2. 在发生更改事件时，向服务器发出AJAX调用（传递一些参数）并使用服务器返回的内容重新填充下一个选择框。这里的“技巧”是你必须要求如何传递参数（GET，POST）以及如何创建选择框HTML。

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

  4. 重复下一个下拉列表的过程。

答案 1 :(得分：0)

不需要多次ajax调用。您可以获取报告的所有日期。并处理下拉客户端。

我不打算提供代码。它很容易编纂，但你需要为你的情况操纵数据，这需要一些时间。

更好的解决方案

答案 2 :(得分：0)

如果可能的话，我会稍微扩展Borislav的答案，提供一个帮助你的概念。

Borislav描述的方法是完全正确的，恕我直言是一个值得赏心悦目的好答案。我已经成功地使用了它，但它对用户来说并不直观，并且不是触摸屏友好的，任何新的应用程序都需要它。

要避免的一个陷阱：如果您打算使用表单帖子（而不是使用JS读取数据），那么您确实需要在页面加载中包含空值，否则您会发现它们很难被识别。可以用相同名称的其他人替换它们，但可靠地添加新的表单元素是一个你不需要的麻烦。

<SELECT id='1st' name='1st' onChange='myajax(this.value)'><OPTIONS></SELECT><SPAN id='2span'><SELECT id='2nd' name='2nd' style='display: none;'>.... etc</SPAN>

运作良好，同样如下：

......从第一年开始选择

你的myajax函数只是替换了2span.innerHTML =无论你发送的是什么......

我可能会建议您将解决方案扩展为使用图形用户界面。最简单的版本是年，月和日的按钮。 HTML5甚至可以动态地为您绘制它们。您可以使用ajax灰显或隐藏任何对给定年份选择无效的按钮。毕竟，为按钮返回一堆代码很容易。只需在生成按钮时设置onClick ='myajax（\“whatever \”）'。

答案 3 :(得分：0)

我有类似的情况，我相信您需要根据数据库中的值创建Months and Days选择，您可以使用php函数date例如<option> echo date(d,Var) - 让我们假设var是数据库的日期= 01/05/2013，在这种情况下，您的选项将是'01'，如果是月份，则使用<option> echo date(F,Var)在这种情况下，选项是'May'，因此对于年。

准备查询以列出所有报告日期，然后从查询中选择它们并将其填充到您的选择中。

检查PHP date function。

这是当前的JSFiddle

答案 4 :(得分：0)

我已经做了很多类似的解决方案。一个非常好的ide是保存变量中选择的日期。因此，当您更改其中一个字段时，其相应的变量将使用其选择的值进行更新。在更改任何选择框时，所有其他选项都通过ajax分别更新，所有变量都以hasch形式发送。这解决了在单独选择时更新内容的许多问题。

如果用户进入“正确”方向没有问题，如果他或她“退回”就会出现问题...上面解决了这个问题。

答案 5 :(得分：0)

<form name="myform">
    <div align="center">


<select name="optone" size="1"
onchange="functionOne(this[this.selectedIndex].value)">
    <option value=" " selected="selected"> </option>
    <option value="Parameter1Value1">Parameter1 First Choice</option>
    <option value="Parameter1Value2">Parameter1 Second Choice</option>
    <option value="Parameter1Value3">Parameter1 Third Choice</option>
</select>

<br><br>
<select name="opttwo" size="1" onchange="functionTwo(this[this.selectedIndex].value)">
    <option value=" " selected="selected"> </option>
    <option value="Parameter2Value1">Parameter2 First Choice</option>
    <option value="Parameter2Value2">Parameter2 Second Choice</option>
    <option value="Parameter2Value3">Parameter2 Third Choice</option>
</select>

<br><br>


<select name="optthree" size="1">
    <option value=" " selected="selected">Final Data for Third List</option>
</select><br><br>


</div></form>

<script>

var $DropDownOneSelected=null;
var $DropDownTwoSelected=null;


function functionOne($value1)
{
    $DropDownOneSelected=$value1;
    // Retrive Data for Second DropDown based on First DrowDown value

}
function functionTwo($value2)
{
    $DropDownTwoSelected=$value2;
    // Retrive Data for Third DropDown based on First and Second DrowDown value

}

</script>
相关问题
最新问题