模式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

所以我注意到有几件事要开始。

Firstly，您实际上没有表单，因此您无法调用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>

希望这就是您想要的！

Felix。