确定下拉菜单的选定索引号？

Question

我试图通过确定所选索引号来确保用户没有选择默认的下拉方法。即使我相信代码是正确的，它似乎也只会返回 false ......到目前为止，我列出了下面列出的代码，但它不起作用，有什么想法吗？

<p id="Gender">
			<label for="Gender">Gender: </label>
			<select required>
			<option disabled selected value="Select">Select</option>
			<option value="Male">Male</option>
			<option value="Female">Female</option>
			</select>
		</p>

 function validate1() { 
  valCheck3 = true;
	var dropD1 = document.getElementById("Gender");
	var resultSelect = dropDown1(dropD1);
	var image3 = getImage(Boolean(resultSelect), "gender");
	var labelGender = getNotification3(Boolean(resultSelect), "gender");
	document.getElementById("Gender").appendChild(image3);
	document.getElementById("Gender").appendChild(labelGender);
  }
  
  function dropDown1(select){
	if(select.selectedIndex > 0){
		return true;
	}
	valCheck3 = false;
	return false;
  }
  

编辑：我添加了 HTML 我使用设置来制作所需的答案，问题是我需要一个按钮来检查是否已选择答案以在框旁边插入图像。所以在这种情况下，我想我可以确定下拉列表的选定索引号，以便我可以确定

Answer 1

您可以将required 属性添加到选择元素，然后将一些value 属性添加到除第一个选项之外的每个选项（使用不带值本身的value，即value="1"） 然后你可以只使用 select.checkValidity()，它返回 true 或 false。

Answer 2

我正在尝试确保用户没有选择默认的下拉菜单

您可以将disabled 属性添加到<option> 并使其成为默认值。如果用户打开下拉菜单，则无法再单击默认选项，用户必须选择其他选项。

例子：

<form action="">
    <select required>
        <option disabled selected value>Default option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit">
</form>