How can I use Javascript in HTML to provide a form's reset or cancel button with the functionality to reselect the selected option and keep it in the same state?

Question

After the user makes some selection changes on the selection element, when the user wants to cancel or reset the form, the system-selected options need to be displayed to the user. (The focus is to reset the form selection element and return to the default selected option value in the view when canceling or resetting the form)

<button>重置</button>
    <select>
      <option>1</option>
      <option>2</option>  
      <option>3</option>
    </select>
    
    <select class="jbselect">
      <option>a</option>
      <option >b</option>
      <option selected>c</option>
    </select>

Answer 1

This is a way to preserve selection history and allow values ​​to be rolled back on each reset button click...

let history = []
$(function() {
  $('.jbselect').change(function() {
    history.push($(this).val());
  })
  // start it off
  history.push($('.jbselect').val());
})

$("button").click(function() {
  if (history.length == 1) return
  // remove latest value
  history.splice(-1, 1)
  $('.jbselect').val(history.at(-1))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>重置</button>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select class="jbselect">
  <option>a</option>
  <option>b</option>
  <option selected>c</option>
</select>