JavaScript中如何为if语句添加多条件实现下拉选值跳转

if语句多条件判断的核心写法 #

多条件同时满足的场景，直接用逻辑运算符&&把每个判断条件串在if的括号中即可，&&的语义是并且：只有前后连接的所有条件全部为真，整个判断逻辑才会成立。
基础写法示例：

if (判断条件1 && 判断条件2 && 判断条件3) {
  // 所有条件满足时执行的代码
}

结合现有HTML的完整可运行代码 #

现有表单默认提交后会直接跳转至clothespicker.html，我们需要拦住默认提交行为，按三个下拉框的选中值做判断后自定义跳转，代码直接放在HTML文件的</body>标签前即可运行：

<script>
// 获取表单元素
const pickerForm = document.getElementById('clothespicker')

// 监听表单提交动作
pickerForm.addEventListener('submit', function(e) {
  // 阻止表单默认跳转逻辑，由代码手动控制跳转
  e.preventDefault()

  // 获取三个下拉框的当前选中值
  const selectedPlace = document.getElementById('place').value
  const selectedWeather = document.getElementById('weather').value
  const selectedLook = document.getElementById('look').value

  // 多条件判断示例：三个值分别为「Outdoors、Sunny、Casual」时跳转对应页面
  if (
    selectedPlace === 'Outdoors'
    && selectedWeather === 'Sunny'
    && selectedLook === 'Casual'
  ) {
    // 替换为实际需要跳转的页面路径
    window.location.href = 'outdoor-sunny-casual.html'
    return
  }

  // 未命中自定义组合时，走原有默认提交逻辑
  pickerForm.submit()
})
</script>

自定义调整方法 #

• 需要匹配其他三个值的组合时，直接参照上述if块格式，将引号内的目标值替换为对应下拉选项的value属性值，同时替换为对应的跳转页面路径即可
• 新增多组匹配逻辑时，可复制多个独立的if判断块依次校验不同的组合
• 判断相等时需要使用===，不要和赋值用的单等号=混淆

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