如何在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>