显示一个 jQuery 对话框/弹出窗口，然后使用对话框的结果设置一个隐藏字段

Question

问题

我有一个带有表单的页面。它有一个隐藏字段：generic_portrait

我希望用户点击链接“选择肖像”

这将使用 jQuery 打开一个对话框/弹出窗口，基于表单中之前完成的下拉菜单。如果“性别”下拉菜单的值为“男性”，则显示男性选项，如果“性别”设置为“女性”，则显示女性选项。

每张肖像都有一个单选按钮，每个按钮都有一个名为“male1”、“male2”等的名称

根据弹出窗口中选择的单选按钮，我希望将隐藏字段设置为与此匹配。

问题

使用 jQuery 显示对话框/弹出窗口的最佳方式是什么，取决于页面上的下拉框。用javascript看选择了什么，然后显示对应的div？

我可以使用 jQuery 进行检查以查看下拉菜单设置为什么，但我如何才能基于此显示特定的弹出窗口？

一旦我弹出它，我如何获取分配给所选单选框的值，并将名为“generic_portrait”的隐藏字段设置为该值。

我为什么要问

通常我会自己解决这个问题，因为我确信这并不难，但我不经常使用 Javascript 和/或 PHP，这对于客户来说是紧急的。所以我真的非常感谢在这方面的帮助。

提前感谢所有回复。

Answer 1

摩西有一些很好的洞察力。但是，要具体回答您的问题：

• 对于您需要的弹出窗口，您可以尝试使用“模态”。查看 jQuery UI 库，特别是 dialog widget。
• 关于如何在每种情况下显示不同的模态，一种选择是创建一个空的 div 元素，该元素默认通过 CSS 隐藏。然后使用对话框小部件，为每个小部件创建不同的模式。一个基本示例：$("#yourID").html("your content").dialog({title:"your title",show:"fade",hide:"fade",buttons:{Done:function(){$(this).dialog("destroy");}}}); 注意：有多种方法可以创建模态内容，包括在 HTML 中完整创建它们，同时隐藏它们，然后简单地使用对话框小部件来显示它们。
• 关于如何使用对话框小部件中选择的内容填充隐藏字段，请查看dialog widget 源代码（例如页面上的“查看源”链接）以了解它们如何获取表单值。然后就可以使用 jQuery 来设置隐藏字段的 value 属性了。

Answer 2

在解决您的问题之前，您应该考虑是否有更可降解（即不依赖于 js）的方法来处理您的表单。如果不启用 JavaScript，听起来您的用户将陷入困境，可以这么说，因为他们将无法完成针对特定性别的问题。

除非您的客户不关心优雅降级，否则我建议将表单分成几部分，然后根据用户选择的内容通过 php 提供正确的部分。这样做消除了对模态对话框的需求（虽然很酷，但无法访问），并允许更多的观众参与表单。