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

Load Data in Divs on another page based on dropdown form selections

本文关键字：加载 Div 数据 另一个 表单 选择      更新时间：2023-09-26

我有一个有 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>

假设我在第一个下拉列表中选择选项"蛋糕"，在第二个下拉列表中选择选项"口香糖"并点击提交，我想在下一页上加载 2 个div，即

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

由于没有选择"馅饼"和"巧克力"，我不希望它们在下一页上加载任何相关数据。

同样，如果我选择"蛋糕"和"巧克力"，相关的div应该在下一页上打开。

我正在尝试根据多个表单选择在另一个页面上加载数据。我完全被打乱了，不知道如何根据这些下拉选择将数据传递到另一个页面。我已经尝试了一些javascript和php，但没有接近任何解决方案。

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

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

形式.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>

显示.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;
    }
}
相关文章：