新窗口打开时选择消失答案

【问题标题】：Selection disappears when new window opens新窗口打开时选择消失
【发布时间】：2010-11-06 10:17:52
【问题描述】：

我目前正在做一个项目，但我被困住了。根据客户要求，对现有表格进行了小修改。

想象一下 HTML 页面如下：

我添加了一个名为 Business Type 的新表单元素，其中有 10 个选项。
用户需要选择一个或多个选项并提交，数据将存储在数据库中。数据也存储在数据库中。我已经检查过了。
表单中还有一个按钮，可以打开一个小窗口来选择一些选项。当此窗口打开时，在业务类型（在表单中）中所做的选择会消失。如何防止这种情况发生？

我正在尝试使用会话。但是有没有更好更简单的方法来实现这一点？我想保留所做的多项选择。

【问题讨论】：

你能告诉我们你的代码吗？这不仅仅是从数据库中取出存储的选择并使用它们来相应地设置弹出窗口的标记吗？
在您告诉我们如何打开子窗口并填充它以及子窗口和父窗口之间的通信如何发生之前，无法建议。

标签： javascript html select

【解决方案1】：

这一切都可以在客户端完成。基本上，您创建一个包含所有您想问的问题的表单，然后使用 JavaScript 显示额外的问题。如果用户没有点击按钮打开额外的问题，他们只是保持他们的空值。如果他们确实打开了额外的问题，则会在页面上弹出，用户将填写输入内容。一旦他们完成了这些问题，您只需将它们隐藏起来，但它们仍然保留用户设置的值。

所以将可选字段放在表单中的一个隐藏的 div 中，然后在单击按钮时显示该 div。

<form ...>
... required inputs
...
...
<a href="#" id="show-optional-inputs">Ask more questions</a>
<div id="optional-inputs" style="display: none;">
    <input ... />
    <input ... />
    <a href="#" id="save-optional-inputs">'Save' optional questions</a>
</div>

<input type="submit" value="submit" />

然后，给 #optional-inputs 一些 CSS（或者你可以随意设置它的样式）：

#optional-input {
   left: ...px;
   position: absolute;
   top: ...px;
   width: ...px;
}

对于打开其他问题的按钮/链接，添加一些 JavaScript/jQuery 以将 div 作为绝对定位窗口打开。

$('#show-optional-inputs').click(function(e) {
    $('#optional-inputs').show();
    e.preventDefault();
});

这将使您大部分时间到达那里。您需要绑定一个事件来触发可选问题框以保存/关闭 - 这实际上只是隐藏该框并保留用户在表单中设置的值。

【讨论】：