實現下拉列表進行狀態選擇功能
更新時間：2017年03月30日 11:09:48 作者：老妖仔
本文主要介紹了實現下拉列表進行狀態選擇功能的代碼。具有很好的參考價值，下面跟著小編一起來看下吧
場景：
eg:在管理一篇博文時，因博文的管理有一列叫：狀態的列，該列有諸多狀態，如：正常，待審核，刪除等... 此時，若使用下拉列表進行狀態選擇，并在選中具體項值后，通過Ajax異步提交，在效果及體驗上就能得到更大化的體驗。
下拉列表例子如下：
<select id="status">
錯誤示范：
$("select#status").click(function(){
console.log($(this).val());
});
若通過click事件執行，則在點擊下拉列表的首次便會觸發一次Ajax請求，這樣并不符合邏輯，故不能使用click事件作為下拉列表選中具體值的做法。
正確示范：
$("select#status").change(function(){
console.log($(this).val());
});
對事件的詮釋如下:
定義和用法
當元素的值發生改變時，會發生 事件。
該事件僅適用于文本域（text field），以及 和 元素。
() 函數觸發 事件jquery下拉框選擇改變事件，或規定當發生 事件時運行的函數。
注釋：當用于 元素時， 事件會在選擇某個選項時發生。當用于 text field 或 text area 時，該事件會在元素失去焦點時發生。
通過以上，能清楚明白，當對于下拉列表時，應該使用事件。
補充：
因為頁面翻頁也是使用Ajax技術進行異步處理jquery下拉框選擇改變事件，當翻頁后，原寫法將失效，此時應該使用如下代碼進行執行：
$(document).on("change",'select#status',function(){
console.log($(this).val());
});
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！