如何获取两个不同select元素的值并在函数中使用它们

Question

我有两个不同的select元素。一个是用户选择自己的性别，另一个是选择自己居住的地方。

我有；

<select class="selectGender" name="gender" id="styleSelect" required>
<option value="">None</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>

和

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

我想要的是，当用户选择男性作为性别并从其他选择元素中选择城镇时，他应该得到一个警告"；不允许"；。

以下是我迄今为止所做的一切，但我一无所获。

function checkGender() {
let gender = document.getElementsByName('gender');
let place = document.getElementsByName('place');
if (gender.value == "male" && place.value == "town") {
alert("Not allowed");
}
}

Answer 1

您在html代码上有错误，请检查此

enter code here  
<select class="selectGender" name="gender"  id="styleSelect" required >
<option value="">None</option>
<option value="male">Male</option>
<option value="female">Female</option>

</select>

enter code here 

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

</select>

<script>
function checkGender(){
let gender=document.getElementsByName('gender')[0].value;
let place=document.getElementsByName('place')[0].value;
console.log(gender);
console.log(place);
if (gender=="male"&&place=="town") {
alert("Not allowed");
}
}
</script>

Answer 2

代码中的几个错误：

• 不能有两个或多个元素具有相同的id，但两个select都具有id="styleSelect"
• 您也应该将checkGender()函数添加到第一个select中，因为用户不一定最后选择第二个select。更改第一个选择还应该触发处理程序来检查选项的值
• 正如其他人所提到的，getElementsByName返回具有给定名称的元素的NodeList集合。这意味着，您需要获取第零个索引处的元素

您可以点击"；运行代码片段"；按钮：

function checkGender() {
let gender = document.getElementsByName('gender')[0];
let place = document.getElementsByName('place')[0];
if (gender.value === "male" && place.value === "town") {
alert("Not allowed");
}
}

<select name="gender" onchange="checkGender()" required>
<option value="">None</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="place" onchange="checkGender()" required>
<option value="">None</option>
<option value="town">Town</option>
<option value="city">City</option>
</select>

Answer 3

尝试document.getElementsByName('ender'([0].value