如何调整现有代码适配两个下拉菜单，解决页面重载后第二个菜单选择失效问题

你的原代码将页面所有下拉作为统一对象处理，仅用localStorage里的单个pref键保存选中项ID，第二个下拉的选中值会直接覆盖第一个的存储记录，页面重载恢复时也只会给第一个匹配ID的选项设置选中状态，因此第二个下拉的状态无法保留。 适配多下拉的修改代码 # var init = function () { var allSelect = $("select"), but = $("button"); // 页面加载时逐个恢复每个下拉的选中状态 allSelect.each(function() { const currentSelect = $(this); // 以下拉的name属性作为唯一标识生成存储键名，避免互相覆盖 const storageKey = "pref_" + currentSelect.attr("name"); const savedOptionId = localStorage.getItem(storageKey); if (savedOptionId) { currentSelect.find("#" + savedOptionId).prop("selected", true); } }) // 监听单个下拉的变更事件，单独存储对应选中值 allSelect.on("change", function() { const currentSelect = $(this); const storageKey = "pref_" + currentSelect.attr("name"); const selectedOptionId = currentSelect.find(":selected").attr("id"); localStorage.setItem(storageKey, selectedOptionId); }) // 重置逻辑：清空所有下拉选中状态+对应本地存储 const reset = function () { allSelect.find(":selected").prop("selected", false); allSelect.each(function() { const storageKey = "pref_" + $(this).attr("name"); localStorage.removeItem(storageKey); }) }; but.on("click", reset); }; $(init); 使用要求 # 给页面上的每个标签设置全局唯一的name属性，示例如下：

<!-- 第一个下拉 -->
<select name="goods_type">
  <option id="type1" value="1">电子设备</option>
  <option id="type2" value="2">服饰鞋帽</option>
</select>

<!-- 第二个下拉 -->
<select name="delivery_area">
  <option id="area1" value="bj">北京</option>
  <option id="area2" value="sh">上海</option>
</select>

• 保证所有标签的id属性全局唯一，即可正常实现多个下拉的状态重载保留。

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