Dropdowns in the form not resetting after adding id to the select in html

June 7, 2022

I am trying to reset the form fields. I have 2 selects with Select2 in JS. If I remove the id of any of the 2 selects it will reset, else it will stay the same.

$(document).ready(function() {
  $("#fieldName").select2();
  $("#actionName").select2();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<form>
  <table>
    <tbody id="table_achievements_tbody">
      <tr>
        <th>1</th>
        <th>
          <select class="form-control" id="fieldName" style="width:280px;">
            <option selected="selected" value="0">Field Name</option>
            <option value="1">Div 2</option>
            <option value="2"> Div 1</option>
          </select>
        </th>
        <th>
          <select class="form-control" id="actionName" style="width:280px;">
            <option selected>Select action</option>
            <option>Equals</option>
            <option>Greater than</option>
            <option>Less than</option>
          </select>
        </th>
        <th><input type="text" id="text2" class="form-control" placeholder="Enter Value" style="width:280px;"></th>
        <th style="width: 120px;">
          <select class="form-control sell" name="argSelect">
            <option value="Arg">Argument</option>
            <option value="AND">AND</option>
            <option value="OR">OR</option>
            <option value="ONLY">ONLY</option>
          </select>
        </th>
        <th style="width:54.58px;"></th>
      </tr>
    </tbody>
  </table>
<button type="reset" value="Reset" class="btn btn-secondary btn-sm">clear</button>
</form>

>Solution :

The issue is because the reset button only works on form controls. The Select2 library hides the original select element and creates a new HTML structure to allow the searching and selection of options. This is not part of a standard form control, so is unaffected by the reset action.

To address this you can hook to the reset event of the form element and manually reset the Select2 instances to their default values, as demonstrated in the below example.

Also note in the following example that I moved the inline style rules in to their own stylesheet. It’s bad practice to mix CSS/JS and HTML, so this should be avoided wherever possible.

jQuery($ => {
  $('#fieldName, #actionName').select2();

  $('form').on('reset', () => {
    $('#fieldName').val('0').trigger('change');
    $('#actionName').val('Select action').trigger('change');
  });
});

#fieldName,
#actionName,
#text2 {
  width: 280px;
}

th.standard {
  width: 120px;
}

th.narrow {
  width: 54.58px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<form>
  <table>
    <tbody id="table_achievements_tbody">
      <tr>
        <th>1</th>
        <th>
          <select class="form-control" id="fieldName">
            <option selected="selected" value="0">Field Name</option>
            <option value="1">Div 2</option>
            <option value="2"> Div 1</option>
          </select>
        </th>
        <th>
          <select class="form-control" id="actionName">
            <option selected>Select action</option>
            <option>Equals</option>
            <option>Greater than</option>
            <option>Less than</option>
          </select>
        </th>
        <th>
          <input type="text" id="text2" class="form-control" placeholder="Enter Value">
        </th>
        <th class="narrow">
          <select class="form-control sell" name="argSelect">
            <option value="Arg">Argument</option>
            <option value="AND">AND</option>
            <option value="OR">OR</option>
            <option value="ONLY">ONLY</option>
          </select>
        </th>
        <th class="narrow"></th>
      </tr>
    </tbody>
  </table>
  <button type="reset" value="Reset" class="btn btn-secondary btn-sm">clear</button>
</form>