模态 javascript 重置关闭内容

Question

保存更改时，模态窗体应自动关闭，再次请求时，应重置所选内容和文本。有什么建议我在 jquery 脚本上做错了吗？

$('#MyModal').on('hidden.modal', function () {
    $(this).find('form').trigger('reset');
    $('#myModal').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button type="button" class="btn-primary" data-toggle="modal" data-target="#myModal" ">Modal Window</button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
   <div class="modal-body"> 
      <div class="form-group col-md-12">
  <select id="role" name="role" class="form-control">
  <option value="" disabled selected>Select your option</option>
 <option value='Maybe'>Maybe</option>
  <option value='Yes'>Yes</option>
   <option value='No'>No</option>
  </select>
      </div>
             <div class="form-group col-md-12">
        <textarea id="thetext" name="thetext" class="form-control" rows="4" cols="20" maxlength="200"></textarea>
        <input type="hidden" name="selectedCase" id="selectedCase" value=""/>
           </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 1

所以我注意到一些事情可以开始。

首先，你实际上没有表格，所以你无法调用reset来清除它。

其次，代码 $('#MyModal').on('hidden.modal' 正在寻找名为 hidden.modal 的事件，该事件实际上并未被调用，因为模态从未被隐藏。

需要做的是添加一个表单或使用替代的清除方法以及关闭要实施的模式的实际方法。我的建议是在手动关闭模式并检索您想要的值之前监听按钮按下，然后清除表单。

解决这些问题后，您应该可以开始了，如下所示：

$('#closeButton').on('click', function () {
    //Close Modal
    $(".modal").modal("hide");
    //Get Values
    var val1 = $("#role").val();
    var val2 = $("#thetext").val();
    //Reset Values
    document.getElementById("form").reset();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button type="button" class="btn-primary" data-toggle="modal" data-target="#myModal" ">Modal Window</button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
   <div class="modal-body"> 
    <form id ="form">
      <div class="form-group col-md-12">
  <select id="role" name="role" class="form-control">
  <option value="" disabled selected>Select your option</option>
 <option value='Maybe'>Maybe</option>
  <option value='Yes'>Yes</option>
   <option value='No'>No</option>
  </select>
      </div>
             <div class="form-group col-md-12">
        <textarea id="thetext" name="thetext" class="form-control" rows="4" cols="20" maxlength="200"></textarea>
        <input type="hidden" name="selectedCase" id="selectedCase" value=""/>
           </div>
      </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="closeButton">Save changes</button>
      </div>
    </div>
  </div>
</div>

希望这就是您想要的！

菲利克斯。

模态 javascript 重置关闭内容

modal javascript reset close content

html

jquery

modal-dialog