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

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属性添加到 select 元素，然后value为每个选项添加一些属性，除了第一个选项（value不使用值本身，即 value="1"）然后您可以只使用 select.checkValidity()，它返回 true 或错误的。

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>