select下拉框选中后页面刷新保持选中内容
时间: 2023-11-08 20:05:58 浏览: 171
实现下拉框选中后页面刷新保持选中内容,可以使用 JavaScript 和 HTML5 的本地存储技术。
1. 在 HTML 页面中,将下拉框的值存储到本地存储中:
```html
<select id="mySelect" onchange="storeSelectedValue()">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<script>
function storeSelectedValue() {
var selectBox = document.getElementById("mySelect");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
localStorage.setItem("selectedValue", selectedValue);
}
</script>
```
2. 在页面加载时,从本地存储中获取之前选中的值,并将其设置为下拉框的选中项:
```html
<script>
window.onload = function() {
var selectBox = document.getElementById("mySelect");
var selectedValue = localStorage.getItem("selectedValue");
if (selectedValue) {
for (var i = 0; i < selectBox.options.length; i++) {
if (selectBox.options[i].value == selectedValue) {
selectBox.selectedIndex = i;
break;
}
}
}
}
</script>
```
这样,在用户重新加载页面时,之前选中的选项会被自动设置为下拉框的选中项。
阅读全文