如何使用纯 Javascript 在 HTML 中找到或选择 select 元素的预选（选定）选项？答案

【问题标题】：How to found or select pre selection (selected) option of select element in HTML using pure Javascript?如何使用纯 Javascript 在 HTML 中找到或选择 select 元素的预选（选定）选项？
【发布时间】：2022-11-21 03:42:19
【问题描述】：

想要在用户单击重置或取消场景中的某些表单步骤后重置回所选选项

<button>Reset</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>

【问题讨论】：

标签： javascript html select option-type question2answer

【解决方案1】：

这是答案，我找到了我的问题。

document.querySelector('.jsPaymentStatusOptions option[selected]').index

从另一个线程中自我发现，建议使用 like option:checked 的答案（但作为回报，用户会更改当前选择的选项）：

document.querySelector('.jsPaymentStatusOptions option:checked')

我想要实现的是：https://codepen.io/tortoisefeel/pen/MWXrQQe 如果选择在页面视图中，一旦用户不采取行动，将选择重置回最后一个选择选项。希望这对搜索中的人有所帮助。谢谢阅读。

【讨论】：

【解决方案2】：

这是一种保留选择历史记录并允许回滚每次单击重置按钮的值的方法...

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>Reset</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>

【讨论】：