如何根据Cookie值预选中下拉选择框的对应选项？

算力阿峰

2026-7-27

解决下拉框根据Cookie值预选中对应选项的问题

问题分析

你之前的代码无法生效有两个核心原因：

你的<select>标签只有name="model_number"属性，没有id="model_number"，所以document.getElementById('model_number')无法找到目标元素，返回null。
即使获取到了下拉框，getElementsByTagName('option')[M111]是将字符串类型的型号值（比如"ZL222"）当作数组索引使用，而数组索引必须是数字，因此无法定位到对应的选项。

解决方案

以下两种方法都可以实现需求，推荐第一种，更简洁高效：

方法一：直接设置下拉框的`value`属性（推荐）

利用<select>元素的value特性，直接将其设置为Cookie中的型号值，浏览器会自动匹配对应value的选项并选中它。

// 确保DOM加载完成后执行代码
window.addEventListener('DOMContentLoaded', function() {
  var M111 = getCookie("ModelNumber");
  // 通过name属性获取下拉框元素
  var selectElement = document.querySelector('select[name="model_number"]');
  
  // 确保元素和Cookie值都存在时再设置
  if (selectElement && M111) {
    selectElement.value = M111;
  }
});

方法二：遍历选项并设置选中状态

如果需要更精细的控制，可以遍历所有选项，找到与Cookie值匹配的选项后设置其selected属性为true。

window.addEventListener('DOMContentLoaded', function() {
  var M111 = getCookie("ModelNumber");
  var selectElement = document.querySelector('select[name="model_number"]');
  
  if (selectElement && M111) {
    var options = selectElement.getElementsByTagName('option');
    // 遍历所有选项
    for (var i = 0; i < options.length; i++) {
      if (options[i].value === M111) {
        options[i].selected = true;
        // 找到匹配项后跳出循环，提升效率
        break;
      }
    }
  }
});