如何将HTML下拉框选中值保存到localStorage并在页面加载时生效？

问题分析 #

你当前的代码存在两个核心问题导致选中状态不生效：

• 重复绑定了change事件，且第一个change事件末尾的.change()会自动触发一次，覆盖了后续从localStorage设置的选中值
• 变量转换语法错误（=+应为= +），部分逻辑冗余（比如遍历option的循环未实际使用结果）

修正方案 #

1. 合并重复的DOM就绪逻辑，避免嵌套
2. 页面加载时优先从localStorage读取值，设置选中状态后手动触发change事件更新页面内容
3. 修正变量转换的语法错误，移除无用代码

修正后的完整代码 #

HTML代码

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

JavaScript代码

$(function() {
  const $select = $('.multiply_ing');
  const $portion = $('.portion');
  const $ingredients = $('.ingredient p');

  // 页面加载时设置选中状态
  const savedValue = localStorage.getItem('value') || '1';
  $select.val(savedValue);

  // 统一处理change事件逻辑
  $select.on('change', function() {
    const multiplyVal = +this.value;
    // 保存到localStorage
    localStorage.setItem('value', multiplyVal);

    // 更新配料数值
    $ingredients.each(function() {
      const ingVal = +this.dataset.val;
      this.innerHTML = ingVal * multiplyVal;
    });

    // 更新份数显示
    const portionVal = +$portion.data('val');
    $portion.html(portionVal * multiplyVal);
  }).change(); // 页面加载时触发一次初始化
});

关键说明 #

• 页面加载时先从localStorage取值，设置select的选中状态，再触发change事件完成页面内容初始化
• 合并了重复的事件绑定和DOM就绪逻辑，避免冲突
• 修正了=+的语法错误（正确写法是= +，用于将字符串转为数字）
• 移除了未使用的option遍历循环，优化代码简洁性

内容的提问来源于stack exchange，提问作者Astw41