如何在HTML中使用Javascript為表單的重置或取消按鈕提供重新選擇已選選項並保持相同狀態的功能？

Question

在使用者在選擇元素上進行了一些選擇變更後，當使用者想要取消或重置表單時，需要顯示給使用者係統選擇的選項。 （重點是重置表單選擇元素，在取消或重置表單時返回視圖中的預設選取選項值）

<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

這是一種保留選擇歷史並允許在每次重置按鈕點擊時回滾值的方法...

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>