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 调用并获取要显示给用户的标记。在下面的脚本中，我使用 jqueryload方法在 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 的标记。