Question

我有一个模态，我可以输入一些数据来创建，也可以更新所选数据。我想要的是，每当模态关闭时，它将清除文本框并将下拉列表设置为默认显示。

我已尝试将此http://jsfiddle.net/5LCSU/应用于我的项目，但它不起作用且也没有错误。

这是我的moda / view：

<div id="productModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Prescription<label id="title"></label></h4>
        </div>
        <div class="modal-body">
            <div class="form-horizontal">
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                <div class="form-group">
                    @Html.Label("Name", new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @ViewBag.name
                    </div>
                </div>
                <div class="form-group">
                    @Html.Label("Complaint", new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @ViewBag.complaint
                    </div>
                </div>
                <div class="form-group">
                    @Html.Label("Medicine", htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.DropDownList("MedcineID", null, "--Select Medicine--", htmlAttributes: new { @class = "form-control" })

                    </div>
                </div>
                <div class="form-group">
                    @Html.Label("Quantity", htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control" } })

                    </div>
                </div>
                <div class="form-group">
                    @Html.Label("Frequency", htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.DropDownListFor(model => model.Frequency, frequency, "-- Frequency --", htmlAttributes: new { @class = "form-control" })

                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.Remarks, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Remarks, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Remarks, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" id="btn-add" class="btn btn-primary">Add to list</button>
            <button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
    </div>
</div>

这是我的js：

$(document).ready(function () {
    //create
    $('#btn-add').click(function () {
        var assessmentID = $('#assessmentID').val();
        var medicineID = $('#MedcineID').val();
        var qty = $('#Quantity').val();
        var freq = $('#Frequency').val();
        var remarks = $('#Remarks').val();
        var data = {
            'assessmentID': assessmentID,
            'medicineID': medicineID,
            'qty': qty,
            'freq': freq,
            'remarks': remarks
        }

        if (medicineID == '') { // check if medicine is null
            alert('Please specify a valid medicine');
        }
        else { //check if duplicate
            $.ajax({//check via controller
                type: "POST",
                dataType: "Json",
                data: data,
                url: '/Prescriptions/CheckData/',
                success: function (f) {
                    if (f == 'Fail') {
                        alert('Specified medicine has already been added');
                    }
                    else {
                        if (qty < 1) {
                            alert('Please specify a valid quantity');
                        }
                        else {
                            if (freq == '') {
                                alert('Please specify a valid frequency');
                            }
                            else {
                                $.ajax({
                                    type: "POST",
                                    dataType: "Json",
                                    data: data,
                                    url: '/Prescriptions/Add/',
                                    success: function (f) {
                                        $('#tbl-prescription').load('/Prescriptions/_PrescriptionList/?assessmentID=' + assessmentID);
                                    }
                                })
                            }
                        }
                    }
                }
            })
        }
    })
});


// clears modal
$('#productModal').on('hidden.bs.modal', function (e) {
    $(this)
      .find("input,textarea,select")
         .val('')
         .end()
})

Answer 1

// clears modal
$('#productModal').on('hidden.bs.modal', function (e) {
     $(":input").val('');  
     $("select").change();
})

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
          <input type="text" value="dgfdhfgjghd">
           <input type="text" value="dgfdhfgjghd">
            <input type="text" value="dgfdhfgjghd">
             <input type="text" value="dgfdhfgjghd">
              <input type="text" value="dgfdhfgjghd">
              <textarea>fgfdhfgjgh</textarea>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>
<script>
$(document).on('hidden.bs.modal', function (e) {
  $('.modal-body input,.modal-body textarea').each(function(){
      $(this).val('');
  });
});
</script>

</body>
</html>

清除模态中的所有输入

2 个答案: