How to create forms with conditional options

问题

I want to create a form with two dropdown boxes so that the options in the second dropdown depend on the choices in the first dropdown. So Dropdown1 might ask the user to opt for CourseA or CourseB and Dropdown2 might present sets of dates - but the dates would differ depending on what the choice in Dropdown1 had been.

I have tried using the post array to set the Dropdown2 choices but then realized that it is not set until the form is submitted. My problem happens before the form is submitted.

Can anyone suggest a way of doing this? I'm using codeigniter but think that this is a php rather than a codeigniter issue.

回答1:

You need to make an asynchronous call to the server once the first drop down is selected. Javascript is going to be your answer. I am not sure if CodeIgnitor will do it natively, but a framework like J-query will probably get you there the quickest.

回答2:

Here is complete solution with 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>

formsel2.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') ));
}

回答3:

The solution will be to use AJAX.

Upon changing your first select menu, you want your javascript to query a server side script through (easiest way) jQuery method POST, that queries your database to then return the select menu options.

jQuery Post

来源：https://stackoverflow.com/questions/8807558/how-to-create-forms-with-conditional-options

标签

php

codeigniter-form-helper