溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jQuery實現Select下拉列表進行狀態選擇功能

發布時間:2020-09-26 03:13:34 來源:腳本之家 閱讀:634 作者:老妖仔 欄目:web開發

場景:

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());
 });

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持億速云!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女