使用select ID作为键在localStorage中存储多个下拉选项值

方法1：适配现有HTML写法 #

修改HTML里的onchange属性，把当前触发事件的select元素传入函数：

<select name="Value1A" id="Value1A" onchange="storeValue(this)">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<select name="Value1B" id="Value1B" onchange="storeValue(this)">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

对应的JS函数：

function storeValue(select) {
  // 确保select有ID，避免无效的localStorage键
  if (select.id) {
    localStorage.setItem(select.id, select.value);
  }
}

方法2：HTML与JS分离（推荐写法） #

去掉HTML中的onchange属性，用纯JS绑定事件，代码结构更清晰：

<select name="Value1A" id="Value1A">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<select name="Value1B" id="Value1B">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

JS代码：

// 获取页面所有select元素
const selects = document.querySelectorAll('select');

// 为每个select绑定change事件
selects.forEach(select => {
  select.addEventListener('change', function() {
    if (this.id) {
      localStorage.setItem(this.id, this.value);
    }
  });
});

额外优化：页面加载恢复选中值 #

如果希望刷新页面后保留之前的选择，添加这段代码：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const selects = document.querySelectorAll('select');
  selects.forEach(select => {
    if (select.id) {
      const savedValue = localStorage.getItem(select.id);
      if (savedValue) {
        select.value = savedValue;
      }
    }
  });
});

说明 #

• 两种方法都实现了核心需求：以select的ID为键，将选中值存入localStorage。
• 加入ID判断，避免无ID的select导致无效存储。
• 方法2遵循前端最佳实践，HTML与JS职责分离，更易维护。

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