提交后重置SELECT

时间:2018-01-22 22:46:31

标签: javascript jquery html

我有jquery脚本,需要函数在submited后重置SELECT输入。

<script>

$(document).ready(function() {
  //elements

  var progressbox = $("#progressbox");
  var progressbar = $("#progressbar");
  var statustxt = $("#statustxt");
  var submitbutton = $("#submit");
  var myform = $("#myForm");
  var output = $("#output");
  var completed = 'Loading...';
  $(myform).ajaxForm({
    beforeSend: function() { //brfore sending form
      submitbutton.attr('disabled', ''); // disable upload button
      statustxt.empty();
      progressbox.slideDown(); //show progressbar
      progressbar.width(completed); //initial value 0% of progressbar
      statustxt.html(completed); //set status text
      statustxt.css('color', '#ffffff'); //initial color of status text
    },
    uploadProgress: function(event, position, total, percentComplete) { //on progress
      progressbar.width(percentComplete + '%') //update progressbar percent complete
      statustxt.html(percentComplete + '%'); //update status text
      if (percentComplete > 50) {
        statustxt.css('color', '#ffff00'); //change status text to white after 50%
      }
    },
    complete: function(response) { // on complete
      output.html(response.responseText); //update element with received data
      myform.resetForm(); // reset form
      submitbutton.removeAttr('disabled'); //enable submit button
      progressbox.slideUp(); // hide progressbar
    }
  });
});

</script>

这是选择输入选项

<select id="jenis" name="jenis" class="select2">
    <option value="SURAT">SURAT</option>
    <option value="UNDANGAN">UNDANGAN</option>
    <option value="NOTA DINAS">NOTA DINAS</option>
</select>

当前脚本重置所有输入但不重置SELECT输入

3 个答案:

答案 0 :(得分:1)

您可以尝试$('#jenis').val("");使您的选择为空,或$('#jenis').prop('selectedIndex', 0);选择第一个(或任何其他)值

&#13;
&#13;
function reset() {
  $('#jenis').val("");//$('#jenis').prop('selectedIndex', 0); if you want to choose first <option>
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="jenis" name="jenis" class="select2">
    <option value="SURAT">SURAT</option>
    <option value="UNDANGAN">UNDANGAN</option>
    <option value="NOTA DINAS">NOTA DINAS</option>
</select>
<button id="reset" onclick="reset()">reset</button>
&#13;
&#13;
&#13;

要在ajax完成时重置你的选择,你可以这样写:

$(myform).ajaxForm({
    ...
    complete: function(response) { // on complete
      $('#jenis').val(""); //clear the select
      output.html(response.responseText); //update element with received data
      myform.resetForm(); // reset form
      submitbutton.removeAttr('disabled'); //enable submit button
      progressbox.slideUp(); // hide progressbar
    }
});

答案 1 :(得分:0)

尝试其中任何一个。这附在您的表单上......

onsubmit="this.form.reset();"

这会附加到提交按钮...

onclick="this.form.reset();"

答案 2 :(得分:0)

取决于您的意思&#34;提交后#34;。如果您的意思是在完成AJAX操作之后,那么逻辑位置就在complete函数

complete: function(response) { // on complete
    output.html(response.responseText); //update element with received data
    myform.resetForm(); // reset form
    submitbutton.removeAttr('disabled'); //enable submit button
    progressbox.slideUp(); // hide progressbar
    $('#jenis').val(''); // I don't know which value you consider to be the default, so this will set no value at all.
}