台灣最大程式設計社群網站
線上人數
1913
 
會員總數:241132
討論主題:186803
歡迎您免費加入會員
討論區列表 >> AJAX / JSON / jQuery >> 請教JQUERY中含有大量資料的select option如何快速新增、全移除
[ 變換順序 ]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
請教JQUERY中含有大量資料的select option如何快速新增、全移除
價值 : 60 QP  點閱數:190 回應數:8

樓主

神戶
門外漢
0 161
1695 215
發送站內信

小弟想請教一個問題
因為每次程式進去時,必須更新 select option的清單資料(約600筆),讓對方單選。
基本上是執行下列


$("#select1 option").remove();
..
...
....
.....

$.each(data, function (a, d) {
html[a] = ["<option value='" + d.no + "'>" + d.data + "</option>"].join("");
a++;
});
$('#select1').append(html.join(''));

小弟覺得600筆資料remove很慢(2~3秒),append也很慢(大約1秒)。

不知道有什麼方式能夠加速


搜尋相關Tags的文章: [ jquery ] , [ 大量 ] ,
本篇文章發表於2017-09-14 10:37
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

小魚
檢舉此回應
選項很多的確容易Lag,
一定要全部載入到select中嗎?
沒有其他的方式嗎?
本篇文章回覆於2017-09-14 19:57
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
回應

淺水員
檢舉此回應
下面範例我是用純javascript處理
1000筆資料新增時間不到1秒
也許可以拿去改改看?


不過600筆資料都放選單,使用者不就要看很久?
應該有比較好的設計?

本篇文章回覆於2017-09-15 06:35
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
回應

風箏
檢舉此回應
改這樣試試看


本篇文章回覆於2017-09-15 09:23
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
回應

風箏
檢舉此回應
補充一下
$("#select1 option")
這個動作等同於全網頁上的元素搜尋過一遍找出符合的特徵

你的迴圈跑幾次
$('#select1').append(html.join(''));
就會全頁搜尋幾次
當網頁元素多的時候,就會產生網頁元素量X迴圈次數的比對次數
本篇文章回覆於2017-09-15 09:26
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
回應

風箏
檢舉此回應
修正一下範例沒注意到你前後的選擇器不同


本篇文章回覆於2017-09-15 09:41
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
6樓
回應

風箏
檢舉此回應
有沒有改A漏了B的八卦....Orz

本篇文章回覆於2017-09-15 09:42
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
7樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應

這樣子就行了,不會有多餘的情況。
另外,一般來說select選項超過100組以上就已經不太適合使用它的。
就如上面有人說的。超過100組使用者誰還會想要拉啊?
這是使用體驗的情況。雖然加入600組並沒很大的問題。

但在用戶體驗感來說,600組真的是一種很雞肋的感覺。
一般來說真的有必要要選擇100組以上的情況,大多數不是做成2分類的選擇。
要不然就是採用自動搜尋條件的做法處理。
本篇文章回覆於2017-09-15 10:55
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
8樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
抱歉!!第2行要改成如下。剛發現用錯指令了
不小心將整個select給移除了。因該要用清空的
請改成如下。

本篇文章回覆於2017-09-15 11:00
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
[ 變換順序 ]   
1

回覆
如要回應,請先登入.