Select2實現全選功能


好久沒有寫博客,有問題解決了一直用筆記記錄,最近還是決定用起來,開始吧

需求描述:如圖所示,需要將ABCDE(因為涉及到公司內部的一些東西,就不展示具體的內容了),能夠一鍵全選到選擇框中

實現思路:1、在下拉框的選項中添加全選這個選項
2、給select添加onchange事件
3、觸發onchange則判斷選項的內容是不是全選,如果是調用check_all(select_id),將其他的選項都添加到選擇框中
4、添加入選項框時需要去掉”全選“這個選項,否則會觸發死循環(后文會講)
5、抽象出check_all(select_id)為單獨的函數,可以被多處復用

上代碼:
1、在下拉框的選項中添加全選這個選項
var newItem = document.createElement("option"); var newItemText = document.createTextNode("全選"); newItem.appendChild(newItemText); select.appendChild(newItem);
2、為選擇框綁定onchange事件,觸發onchange則判斷選項的內容是不是全選,如果是調用check_all(select_id),將其他的選項都添加到選擇框中

3、實現全選的函數:

此處說明可能觸發死循環的原因:因為我們的select框綁定了onchange事件,而我們將所有選項加入框中的操作,也是通過代碼去觸發onchange事件,所以在將全部選項添加入select框中時,又會再次觸發onchage事件,會判斷select框中是否包含"全選",如果此時我們將全選加入select框中,就又會調用check_all,造成死循環

4、抽象出check_all(select_id)為單獨的函數,可以被多處復用,見3中的check_all函數已經是抽象出來的function

最后總結一下這次花費我幾個小時的原因和一點坑:
1、一開始想做一個單獨的全選按鈕,並且也這樣做了,但是最后感覺太丑了而放棄,就想着還是把全選也作為一個option吧。
2、但是option不想button一樣可以單獨綁定事件,要綁定事件,只能在其最近的父節點,即select框上進行綁定,那自然不能綁定click事件了(一開始就是想給option綁定click事件,結果發現一直綁定不上,查了好久)。
3、死循環,第三次提了,一定要注意死循環,當然也有很多其他的思路避免和設計方法這個死循環

題外話:最近慢慢開始走入python的坑,希望能變得更強(給自己打點氣,讀者可以自行忽略)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM