我正在嘗試將<select>HTML 標記中的“選定”選項保存到 localStorage，因此當我重繪 頁面時，最后選擇的選項被選中。我可以看到它保存在 console.log 中，但它在頁面加載時不起作用。我怎樣才能讓它作業？
<select class="multiply_ing">
<option value="0.5">0.5x</option>
<option value="1" selected>1x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
<option value="2.5">2.5x</option>
<option value="3">3x</option>
<option value="4">4x</option>
<option value="5">5x</option>
<option value="6">6x</option>
<option value="8">8x</option>
<option value="10">10x</option>
</select>
<p class="portion" data-val="<?php echo $portion; ?>"></p> <!-- PHP Generated value, let's just say it's "1" -->
<div class="ingredient">
<p data-val="1"></p>
<p data-val="5"></p>
<p data-val="6"></p>
</div>
<script>
$(function() {
$(".multiply_ing").on("change", function() {
let multiply_val = this.value;
$('.ingredient p:nth-child(1)').each(function() {
let ing = this.dataset.val;
this.innerHTML = ing * multiply_val;
});
$('.multiply_ing option').each(function() {
let multi_opt = $(this).val();
let portion = parseFloat(document.querySelector(".portion").dataset.val);
let portions = multi_opt * portion;
});
let portion = document.querySelector(".portion").dataset.val;
document.querySelector(".portion").innerHTML = portion * multiply_val;
}).change();
jQuery($ => {
let $select = $('.multiply_ing');
// get on load
$select.val(localStorage.getItem('value') || 1); // 1 = default value
$select.on('change', e => {
localStorage.setItem('value', e.target.value);
});
});
});
</script>
注意：代碼比本例中的多，但與問題無關。
uj5u.com熱心網友回復：
要執行您需要的操作，您可以在需要時使用val()來獲取和設定選擇的值：
jQuery($ => {
let $select = $('.multiply_ing');
// get on load
$select.val(localStorage.getItem('value') || 1); // 1 = default value
$select.on('change', e => {
localStorage.setItem('value', e.target.value);
});
});
另請注意，each()您的示例中的 沒有做任何事情，可以將其洗掉。此外，multiply_val沒有在任何地方定義。
作為一般規則，如果將 jQuery 加載到 DOM 中會導致性能損失，那么最好在任何地方都使用它。混合使用 JS 和 jQuery 只會導致混亂。
uj5u.com熱心網友回復：
要在 localStorage 中存盤值，您必須使用這樣的鍵值對 localStorage.setItem('selectedValue',yourValue) 并獲取值使用鍵來訪問保存的值 localStorage.getItem('selectedValue')
$(function() {
$('.multiply_ing').change(function() {
localStorage.setItem('selectedValue', this.value);
});
if(localStorage.getItem('todoData')){
$('.multiply_ing').val(localStorage.getItem('selectedValue'));
}
});
對于作業代碼，你可以看到這個演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/504992.html
標籤：javascript jQuery 功能 本地存储 html-选择