HTML jQuery選擇選項值

Question

我試圖對HTML選項值形式選擇使用jQuery ajax函數。

這是我的HTML表單：

<form action="#">
                <table>
                    <tr>
                        <td><label for="gender">Gender</label></td>

                        <select id="gender">
                        <option value="male" selected="selected">Male</option>
                        <option value="female">Female</option>

                        </select> <br />
                        <input>
                        </td>
                        <input type="button" value="SUBMIT" id="getGender"/>

                    </tr>
                </table>
            </form>

這是我的Javascript：

$('#getGender').click(function(){

      if($('#gender').val() == 'male'){

          // do stuff

      }else if ($('#gender').val() == 'female'){

          // do stuff

      }

}); 

但是它不能回答if / else it語句。 我做錯了什么？

Answer 1

您實際上並沒有抓住所選的選項。這是您將如何獲得的：

$("#gender option:selected" ).val()

[編輯]正如Nishit Maheta在評論中提到的，您還可以執行以下操作：

$('#gender').val()

而且，您希望綁定到#gender select元素的change事件，而不是click事件：

$('#gender').change(function(){
    if($(this).val() === "male"){
        console.log("male")
        // male!
    } else if($(this).val() === "female"){
        console.log("female");
        // female!
    }
});

 $('#gender').change(function(){ if($(this).val() === "male"){ console.log("male") // male! } else if($(this).val() === "female"){ console.log("female"); // female! } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="gender"> <option value="male" selected="selected">Male</option> <option value="female">Female</option> </select> 

Answer 2

嘗試這個 。 如果您有疑問，請查看我的演示。

DEMO : http://jsfiddle.net/jwxLzf6x/

Answer 3

這是jsfiddle上的工作版本

https://jsfiddle.net/e892gnhb/

碼

$('#getGender').click(function(){

      if($('#gender option:selected').text() == 'Male'){

          alert('male');

      }else if($('#gender option:selected').text() == 'Female'){

          alert('female');

      }

});