如何重新选择选择的选项回到相同的状态在HTML上的表单重置或使用Javascript取消按钮?

Question

场景，当用户在选择元素上进行了一些选择更改后想要取消或重置表单时，我需要向用户显示系统选择的选项。(这里的问题是重置表单选择元素，在取消或重置表单时，返回到视图中默认的选定选项值)

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

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

Answer 2

我找到了这个问题的答案。

document.querySelector('.jsPaymentStatusOptions option[selected]').index // find the selected option and its index value, in my case it returns 3
document.querySelector('.jsPaymentStatusOptions').selectedIndex = 3 // then set that index value to the select selectedIndex property it works.

自发现自另一个线程，其中答案建议使用类似选项:检查(但这给用户改变当前选择的选项返回):

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

我想实现的是:https://codepen.io/tortoisefeel/pen/MWXrQQe (jQuery方式)

下面是纯Javascript的方法:https://codepen.io/tortoisefeel/pen/MWXrQxJ

当选择在页面视图中，用户没有采取任何行动时，将选择重置为最后一个选择选项。希望这对正在寻找的人有所帮助。谢谢你的阅读。