很难使用 jQuery 获取 <select> 元素的值

Question

HTML：

.....
<form id="manage">
    <label for="first_name">First Name:</label>
    <input class="required" type="text" name="first_name" id="first_name" />

    <label for="last_name">Last Name:</label>
    <input class="required" type="text" name="last_name" id="last_name" />

    <label for="gender">Gender:</label>
    <select class="required" name="gender" id="gender">
        <option selected value="m">Male</option>
        <option value="f">Female</option>
        <option value="u">Undecided</option>
    </select>
</form>
.....

jQuery:

.....
$("#manage .required").each( function() {
    if ($(this).val() == "") {
        alert($(this).attr("id") + " is empty!"); // Code for debugging
        $(this).prev().addClass("error");
        is_error = true;
    }
});
.....

在上面的简单代码 sn-p 中，我尝试将 error 类添加到 <form> 中的任何元素（如果其值为空）。

问题是，$(this).attr("id") 出于某种原因没有拾取<select> 元素；我收到了first_name 和last_name 的警报，但没有gender id 的警报。我已经被这个看似微不足道的问题困扰了几个小时，但似乎无法弄清楚我错过了什么。

我可能只需要一个好耳光，但任何非暴力的帮助将不胜感激。

Answer 1

与$(this).attr('id')无关，是因为你的选择没有""的选项，其默认值为m。

尝试添加一个：

 <select class="required" name="gender" id="gender">
    <option value="">--Select--</option>
    <option value="m">Male</option>
    <option value="f">Female</option>
    <option value="u">Undecided</option>
</select>

另外，您可以使用this.value 代替$(this).val() 和this.id 代替$(this).attr('id')

Fiddle