如何获取两个select元素的值并实现指定条件的告警（现有代码无效）

我帮你排查出代码里的几个小问题啦，咱们一步步修正就能实现需求：

问题分析 #

你的代码没生效主要有这几个原因：

• document.getElementsByName()返回的是元素集合，不是单个元素，直接用.value会获取不到正确值
• 两个<select>的id重复了（都叫styleSelect），不符合HTML规范（id必须唯一）
• 地点选择的<option>里有无效的重复name属性，而且检查逻辑只在地点改变时触发，用户先选地点再选性别时不会触发检查

修正后的完整代码 #

HTML部分（修正id、清理无效属性、添加gender的onchange事件） #

<select class="selectGender" name="gender" id="genderSelect" required onchange="checkGender()">
  <option value="">None</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>

<select class="selectPlace" name="place" id="placeSelect" onchange="checkGender()" required>
  <option value="">None</option>
  <option value="town">Town</option>
  <option value="city">City</option>
</select>

JavaScript部分（正确获取元素和选中值） #

function checkGender() {
  // 用getElementById获取单个元素，比getElementsByName更高效准确
  const genderValue = document.getElementById('genderSelect').value;
  const placeValue = document.getElementById('placeSelect').value;

  // 判断条件，满足时弹出提示
  if (genderValue === "male" && placeValue === "town") {
    alert("Not allowed");
  }
}

额外说明 #

• 如果坚持想用getElementsByName，记得要取集合里的第一个元素：document.getElementsByName('gender')[0].value，因为同一个name的元素可能有多个，但这里我们只有一个
• 给gender的select也加上onchange事件，确保无论用户修改哪个选项，只要满足条件都会触发提示，避免漏判

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