CODEWITHSUNDEEP
javascriptjqueryhtml
Gabriela Boyadjiyska
Gabriela Boyadjiyska

Reputation: 87

jQuery reset of select form doesn't work correctly

I have a form with select tags which initially by default are set to an empty option. For them I have also JavaScript, which disables an option if it was already selected previously by the user.

What I want to do is have a reset all button which if the user wants to can reset all the options to default. This part works but if the user has already selected some options and the JavaScript has disabled them they don't reset and are not anymore selectable. See on the JsFiddle.

JsFiddle: https://jsfiddle.net/qgob6k9m/4/

My question is if there is a way to also restart the previously selected options. Restarting the page is not an option because then the form is sent again.

Thank you!

var $selects = $('select');
$selects.on('change', function() {
  $("option", $selects).prop("disabled", false);
  $selects.each(function() {
    var $select = $(this),
      $options = $selects.not($select).find('option'),
      selectedText = $select.children('option:selected').text();
    $options.each(function() {
      if ($(this).text() == selectedText) $(this).prop("disabled",
        true);
    });
  });
});

$selects.eq(0).trigger('change');

$("#button").on("click", function() {
  $('#select1 option').prop('selected', function() {
    return this.defaultSelected;
  });
  $('#select2 option').prop('selected', function() {
    return this.defaultSelected;
  });
  $('#select3 option').prop('selected', function() {
    return this.defaultSelected;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select name="option" id="select1" size="1" required>
    <option value="" selected="selected" disabled hidden>Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>               
  </select>
  <select name="option" id="select2" size="1" required>
    <option value="" selected="selected" disabled hidden>Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>               
  </select>
  <select name="option" id="select3" size="1" required>
    <option value="" selected="selected" disabled hidden>Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>               
  </select>
  <input align="middle" id="button" type="button" value="Reset Form">
</form>

Upvotes: 0

Views: 1303

Answers (2)

Kevin Chac&#243;n
Kevin Chac&#243;n

Reputation: 185

I think this will do the trick

$("#button").on("click", function(){
    $('#select1 option').prop('selected', function(){
      return this.defaultSelected;
    }).prop('disabled', false);
     $('#select2 option').prop('selected', function(){
      return this.defaultSelected;
    }).prop('disabled', false);
     $('#select3 option').prop('selected', function(){
      return this.defaultSelected;
    }).prop('disabled', false);
  });

Upvotes: 2

Lucas Tambarin
Lucas Tambarin

Reputation: 405

You just need to remove the disabled attribut that you set on your option tag Here is a fiddle of your project with the solution

var $selects = $('select');
$selects.on('change', function() {
  $("option", $selects).prop("disabled", false);
  $selects.each(function() {
    var $select = $(this),
      $options = $selects.not($select).find('option'),
      selectedText = $select.children('option:selected').text();
    $options.each(function() {
      if ($(this).text() == selectedText) $(this).prop("disabled",
        true);
    });
  });
});

$selects.eq(0).trigger('change');

$("#button").on("click", function() {
  $('#select1 option').prop('selected', function() {
    return this.defaultSelected;
  });
  $('#select1 option').prop('disabled',false) // remove the disabled attribut
  $('#select2 option').prop('selected', function() {
    return this.defaultSelected;
  });
  $('#select2 option').prop('disabled',false) // remove the disabled attribut
  $('#select3 option').prop('selected', function() {
    return this.defaultSelected;
  });
  $('#select3 option').prop('disabled',false) // remove the disabled attribut
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select name="option" id="select1" size="1" required>
    <option value="" selected="selected" disabled hidden>Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>               
  </select>
  <select name="option" id="select2" size="1" required>
    <option value="" selected="selected" disabled hidden>Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>               
  </select>
  <select name="option" id="select3" size="1" required>
    <option value="" selected="selected" disabled hidden>Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>               
  </select>
  <input align="middle" id="button" type="button" value="Reset Form">
</form>

Upvotes: 1

Related Questions