jQuery 事件——關於Select選中

場景：

　　eg:在管理一篇博文時，因博文的管理有一列叫：狀態的列，該列有諸多狀態，如：正常，待審核，刪除等...  此時，若使用Select下拉列表進行狀態選擇，並在選中具體項值后，通過Ajax異步提交，在效果及體驗上就能得到更大化的體驗。 

---

下拉列表例子如下：

 

<select id="status">
    <option value="0" >待審核</option>
    <option value="1" >未通過審核</option>
    <option value="2" >制作中</option>
    <option value="3">制作完成</option>
    <option value="4" >發布</option>
    <option value="5">暫停</option>
    <option value="6">刪除</option>
</select>    

 

錯誤示范：

 

$("select#status").click(function(){
    console.log($(this).val());
});

 

若通過click事件執行，則在點擊下拉列表的首次便會觸發一次Ajax請求，這樣並不符合邏輯，故不能使用click事件作為下拉列表選中具體值的做法。

 

正確示范：

 

$("select#status").change(function(){
    console.log($(this).val());
});

 

W3SCHOOL  對change事件的詮釋如下:

 

定義和用法

 

當元素的值發生改變時，會發生 change 事件。

 

該事件僅適用於文本域（text field），以及 textarea 和 select 元素。

 

change() 函數觸發 change 事件，或規定當發生 change 事件時運行的函數。

 

注釋：當用於 select 元素時，change 事件會在選擇某個選項時發生。當用於 text field 或 text area 時，該事件會在元素失去焦點時發生。

 

---

 

通過以上，能清楚明白，當對於Select下拉列表時，應該使用Change事件。

補充：

因為頁面翻頁也是使用Ajax技術進行異步處理，當翻頁后，原寫法將失效，此時應該使用如下代碼進行執行：

$(document).on("change",'select#status',function(){
    console.log($(this).val());
});