Javascript 基于下拉表单选择在另一页上加载div中的数据

我有一个表单有两个下拉菜单：

<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

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;
}

switch（$\u POST['sweets']））{
“蛋糕”一案：
回应“一些数据”；
打破
“馅饼”一案：
回应“一些数据”；
打破
违约：
打破
}
开关（$_POST['candy']））{
巧克力盒：
回应“一些数据”；
打破
“口香糖”一案：
回应“一些数据”；
打破
违约：
打破
}

编辑：使用复选框时

<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;
    }
}

巧克力 口香糖 foreach（$_POST['candy']作为$candy）{ 开关（$candy）{ 巧克力盒： 回应“一些数据”； 打破 “口香糖”一案： 回应“一些数据”； 打破 违约： 打破 } }

---

如果您使用的是PHP，这似乎是最简单的解决方案。顺便说一句，您的表单缺少操作参数和方法参数。Genius buddy！这正是我所需要的。为什么我在其他地方没有遇到这么简单的代码呢。这让我可以根据需要进行调整。谢谢你，克里斯！我遇到了一个小问题。我使用了与上面相同的代码，但我没有使用下拉菜单，而是使用复选框。如果您没有选择任何选项，则该代码可以与下拉菜单配合使用。但是如果没有选中复选框，我会在第38行的C:\wamp\www\the_form\display.php中得到一个未定义的索引：candy。我需要在上面添加一些代码吗？表格代码是：“口香糖巧克力”，我猜出来了。我使用了

isset

。我将

switch（$\u POST['candy']）

替换为

switch（isset（$\u POST['chocolate']）？$\u POST['chocolate']：null）

这样，第一次运行页面时，巧克力索引不存在，因为它没有从表单发送过来。当你提交表单时，它就会存在，并且不会抱怨。万岁！