場景:
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()); });
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持!