好久沒有寫博客,有問題解決了一直用筆記記錄,最近還是決定用起來,開始吧
需求描述:如圖所示,需要將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的坑,希望能變得更強(給自己打點氣,讀者可以自行忽略)