關於jquery控制select下拉框自動展開問題

qq_27110083發表於2018-03-16

最近我們再做系統前臺改版,表格用的jqgrid,領導提出了一個需求讓我很是頭疼。

我們做的是直接在表格進行編輯,然後再把資料傳到後臺處理,其中有一列是通過下拉框將預置資料顯示出來供使用者選擇。這個時候使用者需要先點選一下要編輯的這列進去jqgrid的編輯模式,然後再點選一下才能展開下拉框的內容,領導說這樣太麻煩,要做到點選一下既能進去編輯模式又要展開下拉框,我一開始認為挺簡單的,根據下拉框的id呼叫一下click事件不就行了嗎!就是這樣子的$("#id").click();發現完全沒用,這下就頭疼了。

後來我查閱了很多資料發現了可以通過改變size來使select呈現出類似展開的效果,程式碼是這樣的$("#id").attr("size",length);length就是你下拉框裡的子元素的數量,這樣子雖然展開了但是卻非常醜,又讓我陷入了苦惱,後來在一個外國的網站上給我了一些思路,大致就是模擬滑鼠點選下拉框,具體程式碼如下:

function open(id){//id就是html元素select的id

var elem =$("#"+id);

if(document.createEvent){

e.initMouseEvent("mousedown");

elem[0].dispatchEvent(e);

}else if(element.fireEvent){

elem[0].fireEvent("onmousedown");

}

}

我在指定列進去編輯模式就呼叫這個方法即可實現一次點選即可進入編輯模式又可以展開下拉框,由於公司不能電腦沒有上外網,所以使用手機寫的,如果有寫錯的地方各位大佬予以指正,希望能給那些也在做類似操作的小夥伴兒們以幫助!

相關文章