显示/隐藏选定选项的div

Question

我有三个下拉选择框。每个都包含一组不同的人口统计属性。我想显示一个分数对应于任何组合的选择是由一个用户。例如，如果用户选择Male, 18-24, Asian-American，我想隐藏当前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方法来加载infodiv中的新标记。

$(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的标记。