根据下拉表单选择在另一页上加载Div中的数据

时间:2013-09-18 15:29:59

标签: javascript php forms drop-down-menu

我有一个包含2个下拉菜单的表单:

<form id="form1">
<select name="sweets" id="sweets">
  <option value="Cake">Cake</option>
  <option value="Pie">Pie</option>
</select>

<select name="candy" id="candy">
  <option value="Chocolate">Chocolate</option>
  <option value="Gum">Gum</option>
</select>

<input type="submit" value="Submit">
</form>

假设我在第一个下拉列表中选择'Cake'选项并在第二个下拉列表中选择'Gum'并点击提交,我想在下一页加载2个div。即

        <div id="cake">some data</div> and <div id="gum">some data</div>

由于未选择'Pie'和'Chocolate',我不希望他们在下一页加载任何相关数据。

同样,如果我选择'Cake'和'Chocolate',相关的div应该在下一页打开。

我正在尝试根据多个表单选择在另一个页面上加载数据。我完全被zonked,并且没有关于如何根据这些下拉选项将数据传递到另一个页面的线索。我已经尝试了一些javascript以及php,但没有接近任何解决方案。

有人可以帮忙!或者指出我正确的方向。谢谢!

1 个答案:

答案 0 :(得分:0)

您可以使用一堆不同的方法,这里有一个使用switch

form.php的

<form id="form1" action="display.php" method="post">
<select name="sweets" id="sweets">
  <option value="Cake">Cake</option>
  <option value="Pie">Pie</option>
</select>

<select name="candy" id="candy">
  <option value="Chocolate">Chocolate</option>
  <option value="Gum">Gum</option>
</select>

<input type="submit" value="Submit">
</form>

Display.php的

switch($_POST['sweets']){
    case 'Cake':
          echo '<div id="cake">some data</div>';
          break;
    case 'Pie':
          echo '<div id="pie">some data</div>';
          break;
    default:
          break;
}

switch($_POST['candy']){
    case 'Chocolate':
          echo '<div id="chocolate">some data</div>';
          break;
    case 'Gum':
          echo '<div id="gum">some data</div>';
          break;
    default:
          break;
}

编辑:使用复选框时

<input name="candy[]" type="checkbox" value="Chocolate">Chocolate
<input name="candy[]" type="checkbox" value="Gum">Gum

foreach($_POST['candy'] as $candy){
    switch($candy){
        case 'Chocolate':
          echo '<div id="chocolate">some data</div>';
          break;
        case 'Gum':
          echo '<div id="gum">some data</div>';
          break;
        default:
          break;
    }
}