jQuery UI 对话框关闭（“取消”）时如何保留 HTML 控件的旧值？

Question

我有一个带有select 和input（复选框）控件的HTML（嗯...）form 形式的JQuery UI 模式对话框。对话框和控件按预期工作，除了控件保留其新状态（例如选中复选框），即使我关闭对话框窗口（或按下按钮“取消”）。

是否有任何机制可以让 jQuery UI 对话框在按下某个退出按钮（例如“取消”）时保留旧的控件状态，或者我是否已经在 J​​avaScript 中滚动我自己的状态管理（我希望不是）。

以下是当前发生和不应发生的情况的示例：

1. 进入对话框。
2. 复选框已关闭。
3. 将复选框从关闭更改为打开。
4. 关闭对话框窗口。
5. 再次打开它。
6. 复选框已打开（我希望它关闭，因为该对话框之前已“取消”）。

更新这是我的 HTML 的相关部分，包括对 clone() 的调用。

<script>
$(function() {
    var dialog = $("form.dialog").clone().dialog({
        autoOpen: false,
        height: 300,
        width: 300,
        modal: true,
        buttons: [
            {
                text: "Ok",
                click: function() {
                    $(this).submit();
                    $(this).dialog("close");
                }
            },
            {
                text: "Cancel",
                click: function() {
                    $(this).dialog("close");
                }
            }
        ]
    });

    $(“#dialog-button”).on("click", function() {
        dialog.dialog("open");
        return false;
    });
});

</script>

<form hidden method="post" action="" class="dialog" class="ui-dialog-titlebar ui-widget-header" title=“Test”>

        <select name="name">

            </option>
                <option value="value">
                Test
                </option>

Answer 1

您可以使用原生<form>元素的reset()方法重置表单，如下所示：

$(function() {
  var dialog = $("form.dialog").dialog({
    autoOpen: false,
    height: 200,
    width: 300,
    modal: true,
    buttons: [{
      text: "Ok",
      click: function() {
        $(this).submit();
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close").get(0).reset(); //reset the form
      }
    }],
    close: function() {
      this.reset(); //reset the form
    }
  });

  $("#dialog-button").on("click", function() {
    $("form.dialog").dialog("open");
    return false;
  });
});

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<form method="post" action="" class="dialog" class="ui-dialog-titlebar ui-widget-header" title="Test">
  <select name="name">
    <option value="value">Test</option>
    <option value="value">Option</option>
  </select>
  <input type="checkbox" />
</form>
<button id="dialog-button">Open</button>

---

reset() 方法属于DOM 元素。在回调函数内部this 引用原生的DOM 元素。

dialog() 是一个 jQuery 函数。因此，为了关闭对话框，我们通过将 this 包装在 $() 中并调用 $(this).dialog("close"); 来创建一个 jquery 对象。

现在，jquery 对象$(this) 没有reset() 方法，所以我们使用jQuery 的get() 方法从中提取DOM 元素并将其称为reset() 之类的

 $(this).dialog("close").get(0).reset();

这相当于：

$(this).dialog("close"); 
this.reset();

(简而言之，我这样做是为了通过链接来减少行数)

在close回调中，由于我们不必通过调用jquery方法手动关闭对话，我们不需要jquery对象——我们只需调用this.reset()进行重置。

参考：

• HTMLFormElement.reset()
• get()

旁注：您使用的引号 (“) 在 javascript 中无效。

Answer 2

在这种情况下，我可能会在创建对话框之前克隆form。然后，使用克隆的元素创建对话框。这样，控件应该是未连接的。

$('form.myForm').clone().dialog();

请注意，它们不应该有 ID，因为这样会导致文档中出现重复的 ID。