JavaScript+jQuery创建对象时读取下拉框值报错如何解决？

Cannot read properties of undefined (reading 'text')的本质是你尝试读取text属性的上级目标是undefined，触发这个报错的常见场景有3种：

• 代码执行时机早于DOM渲染完成：脚本放在<head>标签内，或者写在<select id="cb">元素的前面，运行时document.getElementById("cb")无法获取到未渲染的DOM元素，返回null，后续调用options属性自然报错
• 元素id不匹配：目标select的id拼写错误、大小写不符，或者存在重复id，都会导致getElementById返回null
• 无选中的option项：如果动态清空select选项后立刻执行代码，selectedIndex会返回-1，用-1作为下标取options[-1]返回undefined，读取text属性就会触发报错

你改用jQuery写法没有生效也是同样的逻辑，拿不到目标元素时$('#cb option:selected')返回空jQuery对象，调用text()只会返回空字符串，不会报错但也拿不到预期值。

1. 调整代码执行时机 #

确保DOM完全渲染后再执行取值逻辑，优先将脚本放在</body>闭合标签之前，也可以用事件监听包裹代码：

原生JS写法 #

document.addEventListener('DOMContentLoaded', function() {
  var object = {
    variable1: "test",
    variable2: document.getElementById("cb").options[document.getElementById("cb").selectedIndex].text
  }
  // 所有使用object的代码都放在该回调内部执行
})

jQuery写法 #

$(document).ready(function() {
  var object = {
    variable1: "test",
    variable2: $('#cb option:selected').text()
  }
})

2. 增加空值校验，添加兜底逻辑 #

为了避免异常场景下代码直接中断，可以加前置校验或者使用可选链做兼容，即使拿不到值也只会返回默认空值：

基础兼容写法 #

var object = {
  variable1: "test",
  variable2: (function() {
    const selectEl = document.getElementById("cb")
    // 同时校验元素存在、且存在有效选中项
    if (selectEl && selectEl.selectedIndex >= 0) {
      return selectEl.options[selectEl.selectedIndex].text
    }
    // 兜底返回空字符串，可根据业务需求调整默认值
    return ""
  })()
}

可选链简化写法（ES6+，兼容性满足时优先使用） #

var object = {
  variable1: "test",
  variable2: document.getElementById("cb")?.options?.[document.getElementById("cb")?.selectedIndex]?.text ?? ""
}

3. 支持实时获取最新选中值的优化方案 #

如果需要variable2每次调用都返回select的最新选中值，而不是只在对象创建时取一次固定值，可以将其定义为getter：

var object = {
  variable1: "test",
  get variable2() {
    const selectEl = document.getElementById("cb")
    return selectEl?.options?.[selectEl?.selectedIndex]?.text ?? ""
  }
}
// 后续调用方式不变：console.log(object.variable2) 即可拿到实时选中值

4. 排查元素有效性 #

如果上述操作完成后还是报错，可以打开浏览器控制台执行document.getElementById("cb")，如果返回null就检查DOM结构中的id拼写、是否存在重复id的问题。

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