javascript - 显示/隐藏所选选项的 div

Question

我有三个下拉选择框。每个都包含一组不同的人口统计属性。我想显示与用户所做的任何选择组合相对应的分数。例如，如果用户选择男性，18-24，亚裔美国人，我想隐藏当前div并显示与该组合对应的div。

我已经看到了如何仅使用一个选择框来执行此操作的答案，但由于我有三个选择框并且有更多的组合，所以我想看看是否有一种简单的方法可以有效地执行此操作。如果需要，我可以提供特定的代码，尽管如何执行此操作的一般示例也很好 - 谢谢!

Answer 1

为所有可能的组合保留隐藏的 div 并不是一个好主意。这将使您的页面尺寸更大。为什么不使用 ajax 仅根据需要获取相关信息并显示它？

在您的页面中，仅保留一个 div 来显示信息

<select id="Age">
     <option value='1'>18-24</option>
     <option value='2'>25-50</option>
</select>
<select id="Place">
     <option value='1'>Asia</option>
     <option value='2'>America</option>
</select>
<div id="info"></div>

现在监听下拉列表的更改事件，获取下拉列表的选定值并对服务器页面进行 ajax 调用并获取要显示给用户的标记。在下面的脚本中，我使用 jquery load 方法在 info div 中加载新标记。

$(function(){

   $("#Age,#Place").change(function(e){
      var age=$("#Age").val();
      var place=$("#Place").val();
      $("#info").load("yourServerPage.php?age="+age+"&place="+place);

   });

});

假设您有一个名为 yourServerPage.php 的服务器页面，它接受查询字符串中的年龄和地点并返回信息 div 的标记。