select标签无法选择其他选项始终默认首个带值选项如何解决

问题原因 #

你代码里的核心错误是在if判断中误用了赋值运算符=，而不是比较运算符==/===：
执行if(document.getElementById('colorSelector').value = "green")时，逻辑不是判断下拉值是否等于green，而是直接把下拉框的值强制设置为green，所以每次触发事件都会把值改成green，永远不会进入red的判断分支。

基础修正代码 #

把判断逻辑里的=替换为严格相等运算符===即可解决当前问题：

function getColor(){
  const selector = document.getElementById('colorSelector')
  if(selector.value === "green"){
    document.getElementById('mainButton').setAttribute('onclick', 'colorChangeGreen()')
  }else if(selector.value === "red"){
    document.getElementById('mainButton').setAttribute('onclick', 'colorChangeRed()')
  }
}

适合多选项的优化方案 #

如果后续要加更多颜色选项，不需要重复写if判断，可以直接根据下拉值拼接对应的函数名，代码扩展性更强：

function getColor(){
  const selectedColor = document.getElementById('colorSelector').value
  // 仅选中有效颜色时修改按钮点击事件
  if(selectedColor && selectedColor !== 'Choose a color'){
    // 自动拼接对应函数名，比如green对应colorChangeGreen
    const handlerName = `colorChange${selectedColor.charAt(0).toUpperCase() + selectedColor.slice(1)}`
    document.getElementById('mainButton').setAttribute('onclick', `${handlerName}()`)
  }
}

额外优化建议：不推荐用setAttribute绑定onclick事件，更安全的写法是直接给元素的onclick属性赋值，避免属性解析异常：

document.getElementById('mainButton').onclick = window[handlerName]

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