jQuery實現Select下拉列表進行狀態(tài)選擇功能
更新時間：2017年03月30日 11:09:48 作者：老妖仔
本文主要介紹了jQuery實現Select下拉列表進行狀態(tài)選擇功能的代碼。具有很好的參考價值，下面跟著小編一起來看下吧
場景：
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事件的詮釋如下:
定義和用法
當元素的值發(fā)生改變時，會發(fā)生 change 事件。
該事件僅適用于文本域（text field），以及 textarea 和 select 元素。
change() 函數觸發(fā) change 事件，或規(guī)定當發(fā)生 change 事件時運行的函數。
注釋：當用于 select 元素時，change 事件會在選擇某個選項時發(fā)生。當用于 text field 或 text area 時，該事件會在元素失去焦點時發(fā)生。
通過以上，能清楚明白，當對于Select下拉列表時，應該使用Change事件。
補充：
因為頁面翻頁也是使用Ajax技術進行異步處理，當翻頁后，原寫法將失效，此時應該使用如下代碼進行執(zhí)行：
$(document).on("change",'select#status',function(){
console.log($(this).val());
});
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
最近在項目開發(fā)中遇到這樣的需求，點擊購買按鈕，模擬拋物線將物品彈到購物車里，購物車添加物品后，顯示+1動畫。效果非常棒，接下來小編把實例代碼分享到腳本之家平臺，需要的的朋友參考下吧2017-05-05
這篇文章主要介紹了jQuery mobile 移動web(4)的相關資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jQuery數據緩存用法,較為詳細的分析了jQuery數據緩存的功能、定義與相關的使用技巧,需要的朋友可以參考下2015-02-02
背景顏色，比如換個心情之類的，需要記住這樣的一個狀態(tài)，下面為大家介紹下利用cookie記住背景顏色的具體實現，感興趣的朋友不要錯過2013-11-11
下面與大家分享下兩種方法設置disabled屬性以及三種方法移除disabled屬性，感興趣的朋友可以參考下哈，希望對你有所幫助2013-05-05
jquery input checked全選與反選1.3.2的版本
jquery 全選與反選1.3.2的版本2009-05-05
Lightbox 應該是最流行的圖片瀏覽效果了，常具有功能包括：自動根據窗口的大小縮放圖片，模式窗口，幻燈片方式播放，內容預加載，漸變等效果。2011-04-04
上文介紹了如何篩選到需要的元素。得到了元素之后就要對其進行操作。2010-03-03
這篇文章主要介紹了jQuery中使用animate自定義動畫的方法的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-05-05
本文主要給大家詳細介紹了jQuery過濾選擇器，包含基本過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器等，十分全面,需要的朋友可以參考下2015-01-01