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

显示/隐藏所选选项的div

1 个答案: