javascript - 从JQuery对话框窗口更新后，使HTML元素保持可见

假设我有一个表单，用户需要在其中选择一些字段。

提交后，我想对是否选择了字段进行一些错误检查，如果没有选择，我将提供一个对话框窗口，指出错误消息以及从对话框窗口中选择/更新字段的可能性。

我可以打开包含div的对话框窗口，其中包含字段选择，但是在一般页面中，该div将消失。

如何在打开或关闭对话框窗口期间和之后使此div保持可见？

请参见下面或JSFiddle处的代码段

$('#submit').click(function() {

  var $dialog = $('<div></div>')
    .html('You forgot something, update below')
    .dialog({
      title: 'check',
      buttons: {
        OK: function() {
          $(this).dialog("close");
        }
      }
    });

  $dialog.dialog('open');

  $dialog.append($('.classSelector'));


});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

General page to make selection
<div class='classSelector'>
  <p>select car:
    <select>
      <option selected disabled>car type</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </p>
</div>
<p>
  <button id='submit'>Submit</button>
</p>

最佳答案

在$ dialog.dialog（'open'）之后执行以下代码：

$ dialog.append（$（'。classSelector'）。clone（））;

使用.clone将允许您复制整个classSelector div，但原始div仍将在页面上。