javascript - 关闭 jQuery UI 对话框时如何保留 HTML 控件的旧值 ("cancelled")？

Question

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

是否有任何机制可以让 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

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

$(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 创建了一个 jquery 对象。里面$()并调用$(this).dialog("close"); .

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

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

这相当于:

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

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

在close里面回调，因为我们不必通过调用 jquery 方法手动关闭对话，我们不需要 jquery 对象 - 我们只需调用 this.reset()用于重置。

引用:

• > HTMLFormElement.reset()
• > get()

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