我想在页面刷新后保持选中选项。 我的代码是:
window.onload = function() {
var selItem = sessionStorage.getItem("SelItem");
jQuery('#me2000 .term').val(selItem);
}
jQuery('#me2000 .term').change(function() {
var selVal = jQuery(this).val();
sessionStorage.setItem("SelItem", selVal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="me2000">
<select id="sort-item" class="term">
<option value="option 1" data-sort="1">option 1</option>
<option value="option 2" data-sort="2">option 2</option>
<option value="option 3" data-sort="3">option 3</option>
</select>
<select id="sort-item2" class="term">
<option value="option 4" data-sort="4">option 4</option>
<option value="option 5" data-sort="5">option 5</option>
<option value="option 6" data-sort="6">option 6</option>
</select>
</div>
对于一个标记,此代码为work。 但对于两个
不起作用。 有人能帮我吗?
试试看这个
取消注释并按指示进行注释
演示
null
// remove this on your server
let selItems = [{ "sort-item": "option 2" }, { "sort-item2": "option 5" } ];
// uncomment this
// let selItems = JSON.parse(sessionStorage.getItem("SelItem")) || [];
$(function() {
if (selItems) {
selItems.forEach(obj => {
const [k, v] = Object.entries(obj)[0]
$("#" + k).val(v)
})
}
$('.term').on("change", function() {
selItems = $('.term').map(function() {
return { [this.id]: this.value }
}).get();
// remove this
console.log(selItems);
// uncomment this on your server
// sessionStorage.setItem("SelItem", JSON.stringify(selItems))
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="me2000">
<select id="sort-item" class="term">
<option value="option 1" data-sort="1">option 1</option>
<option value="option 2" data-sort="2">option 2</option>
<option value="option 3" data-sort="3">option 3</option>
</select>
<select id="sort-item2" class="term">
<option value="option 4" data-sort="4">option 4</option>
<option value="option 5" data-sort="5">option 5</option>
<option value="option 6" data-sort="6">option 6</option>
</select>
</div>
看起来Jquery位于Div,而不是select标记
我想它应该是这样的
<script>
window.onload = function() {
var selItem = sessionStorage.getItem("SelItem");
jQuery('#sort-item.term').val(selItem);
}
jQuery('#sort-item2.term').change(function() {
var selVal = jQuery(this).val();
sessionStorage.setItem("SelItem", selVal);
});
</script>
或者您应该为另一个选择选项分配一个不同的类,并将JQuery类中的一个更改为您创建的类。