jQuery 3.3.1与1.12.2中select选项转数组兼容性问题及修复咨询

看起来你遇到的是jQuery版本升级后，原生DOM属性访问方式的兼容性问题——这在1.x到3.x的升级中很常见，我来帮你解决：

问题根源 #

在jQuery 1.12.2中，jQuery对象的内部实现允许你意外地直接访问原生DOM元素的属性（比如select的options），但jQuery 3.x对对象包装机制做了严格优化，直接在jQuery对象上调用options会返回undefined，最终导致你的数组为空。

可行的修复方案 #

以下几种方法在jQuery 3.x和旧版本中都能稳定工作，任选其一即可：

方案1：先获取原生DOM元素再处理 #

先把jQuery对象转换成原生的select元素，再访问它的options集合，最后转成数组：

// 获取原生select元素
const selectDom = $('#category')[0];
// 把options集合转为数组（存的是option DOM元素）
const categories = Array.from(selectDom.options);

// 如果需要提取选项的value或文本，可直接映射：
const categoryValues = Array.from(selectDom.options, opt => opt.value);
const categoryTexts = Array.from(selectDom.options, opt => opt.textContent);

方案2：用jQuery的遍历方法（推荐） #

利用jQuery的.each()或$.map()来遍历选项，这种方式最符合jQuery的设计规范：

// 用each遍历存数组
const categories = [];
$('#category option').each(function() {
  // this指向当前的原生option元素
  categories.push(this); 
  // 按需替换成this.value（存值）或this.textContent（存文本）
});

// 用$.map更简洁地生成数组
const categoryValues = $.map($('#category option'), function(opt) {
  return opt.value;
});

方案3：使用jQuery的.get()方法 #

.get()方法会直接返回jQuery对象包含的DOM元素数组：

// 直接获取所有option的DOM元素数组
const categories = $('#category option').get();

额外提醒 #

确认你的代码是在DOM完全加载后执行的，比如包裹在$(document).ready()中：

$(document).ready(function() {
  // 这里写你的代码
});

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