js根据localstorage中存储的值与select下拉的值进行比较,值相等则选中
时间: 2024-02-18 14:00:48 浏览: 63
js获取select标签选中值的两种方式
您可以使用JavaScript来实现根据localStorage中存储的值与select下拉的值进行比较,值相等则选中的功能,具体实现如下:
HTML代码:
```html
<select id="mySelect">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
```
JavaScript代码:
```javascript
// 从localStorage中获取存储的值
var selectedValue = localStorage.getItem('selectedValue');
// 如果localStorage中有存储的值,则将select选项设置为对应的值
if (selectedValue) {
var select = document.getElementById('mySelect');
for (var i = 0; i < select.options.length; i++) {
if (select.options[i].value === selectedValue) {
select.options[i].selected = true;
break;
}
}
}
// 监听select选项的变化,将选中的值存储到localStorage中
document.getElementById('mySelect').addEventListener('change', function() {
var selectedValue = this.value;
localStorage.setItem('selectedValue', selectedValue);
});
```
以上代码会在页面加载时从localStorage中获取存储的值,并将select选项设置为对应的值。当select选项发生变化时,会将选中的值存储到localStorage中。这样,下次打开页面时就会自动选中上次选中的值。
阅读全文