1

我想创建一个带有两个下拉框的表单，以便第二个下拉列表中的选项取决于第一个下拉列表中的选项。因此，Dropdown1 可能会要求用户选择 CourseA 或 CourseB，而 Dropdown2 可能会显示日期集 - 但日期会根据 Dropdown1 中的选择而有所不同。

我曾尝试使用 post 数组来设置 Dropdown2 选项，但后来意识到它在提交表单之前没有设置。我的问题发生在表单提交之前。

任何人都可以建议这样做的方法吗？我正在使用 codeigniter，但认为这是 php 而不是 codeigniter 问题。

4

3 回答 3

1

选择第一个下拉菜单后，您需要对服务器进行异步调用。Javascript 将成为您的答案。我不确定 CodeIgnitor 是否会在本地完成，但是像 J-query 这样的框架可能会让你最快地到达那里。

于 2012-01-10T17:26:02.403 回答
0

这是使用jQuery的完整解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>test</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script type="text/javascript">
  /*<![CDATA[*/
  function populateSel2()
  {
    $.post( 'formsel2.php',
           {sel1: $('#sel1').val()},
           function(data)
           {
            var sel2 = $('#sel2');
            var o=jQuery.parseJSON(data);

            sel2.children().remove();

            var l=o.length;
            for(var i=0; i<l; i++)
              sel2.append('<option value="'+o[i].val+'">'+o[i].txt+'<'+'/option>');
           }
          );
  }

  $(document).ready( function()
            {
            $('#sel1').change( populateSel2 );
            populateSel2();
            } );
  /*]]>*/
  </script>

</head>
<body>
  <form method="post" action="#">
    <fieldset>
      <select name="sel1" id="sel1">
        <option value="">-= Select =-</option>
        <option value="1">Val 1</option>
        <option value="2">Val 2</option>
      </select>
    </fieldset>
    <fieldset>
      <select name="sel2" id="sel2">
        <option value="">Select first option</option>
      </select>
    </fieldset>
  </form>
</body>
</html>

formel2.php：

<?php

if(empty($_POST['sel1']))
{
  echo json_encode(array( array('val'=> '', 'txt' => 'Select first option') ) );
}
else if($_POST['sel1']=='1')
{
  echo json_encode(array( array('val'=> 'A_1', 'txt' => 'Option A#1') , array('val'=> 'A_2', 'txt' => 'Option A#2'), array('val'=> 'A_3', 'txt' => 'Option A#3') ));
}
else
{
  echo json_encode(array( array('val'=> 'B_1', 'txt' => 'Option B#1') , array('val'=> 'B_2', 'txt' => 'Option B#2'), array('val'=> 'B_3', 'txt' => 'Option B#3') ));
}
于 2012-01-10T19:04:04.207 回答
0

解决方案是使用 AJAX。

在更改您的第一个选择菜单后，您希望您的 javascript 通过（最简单的方式）jQuery 方法查询服务器端脚本POST，该方法查询您的数据库，然后返回选择菜单选项。

jQuery 帖子

于 2012-01-10T17:25:53.067 回答