場景：

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

下拉列表例子如下：

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

錯誤示范：

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

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

正確示范：

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

W3SCHOOL  對change事件的詮釋如下:

定義和用法

當(dāng)元素的值發(fā)生改變時，會發(fā)生 change 事件。

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

change() 函數(shù)觸發(fā) change 事件，或規(guī)定當(dāng)發(fā)生 change 事件時運行的函數(shù)。

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

通過以上，能清楚明白，當(dāng)對于Select下拉列表時，應(yīng)該使用Change事件。

補充：

因為頁面翻頁也是使用Ajax技術(shù)進行異步處理，當(dāng)翻頁后，原寫法將失效，此時應(yīng)該使用如下代碼進行執(zhí)行：

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

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持錯新站長站！