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

Question

问题

我有一个带有表单的页面。它有一个名为：generic_portrait

的隐藏字段

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

这将使用jQuery打开一个Dialog / Popup，基于之前在表单中完成的下拉列表。如果名为“性别”的下拉列表的值为“男性”，则显示男性选项，如果“性别”设置为“女性”则显示女性选项。

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

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

问题

使用jQuery显示对话框/弹出窗口的最佳方法是什么，具体取决于页面上的下拉框。使用Javascript查看所选内容，然后显示相应的Div？

我可以检查一下使用jQuery设置下拉列表的内容，但是如何根据它显示特定的弹出窗口？

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

为什么我要问

通常情况下，我会自己解决这个问题，因为我确信这并不困难，但我不经常使用Javascript和/或PHP，这是客户迫切需要的。所以我真的非常感谢你对这一点有所帮助。

感谢所有回复。

Answer 1

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

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

Answer 2

摩西有一些很好的见解。但是，要专门回答你的问题：

• 对于您需要的弹出窗口，您可以尝试使用“模态”。查看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设置隐藏字段的值属性。