在做一個編輯對話框時,要對裡面帶有select option的操作。主要是想動态加載option和對option的選中。但是由于項目中使用了jquery裡的chosen()方法,怎麼也無法實作效果。原碼如下:
Java代碼
- <select id="viewOLanguage" data-rel="chosen">
- <option value="zh">簡體中文(簡體中文 Chinese)</option>
- <option value="en">English(英語 English)</option>
- <option value="fr">français(法語 French)</option>
- <option value="de">Deutsch(德語 German)</option>
- <option value="it">italiano(意大利語 Italian)</option>
- <option value="es">español(西班牙語 Spanish)</option>
- <option value="ru">русский(俄語 Russian)</option>
- <option value="ja">日本語(日語 Japanese)</option>
- <option value="ko">한국어(韓語 Korean)</option>
- </select>
- <select id="tLanguage" multiple="multiple" data-rel="chosen" style="width: 80%" >
- <option value="zh">簡體中文(簡體中文 Chinese)</option>
- <option value="en">English(英語 English)</option>
- <option value="fr">français(法語 French)</option>
- <option value="de">Deutsch(德語 German)</option>
- <option value="it">italiano(意大利語 Italian)</option>
- <option value="es">español(西班牙語 Spanish)</option>
- <option value="ru">русский(俄語 Russian)</option>
- <option value="ja">日本語(日語 Japanese)</option>
- <option value="ko">한국어(韓語 Korean)</option>
- </select>
在引用的js檔案中使用了這樣的代碼:
Js代碼
- //chosen - improves select
- $('[data-rel="chosen"],[rel="chosen"]').chosen();
然後在自己的私有js檔案中怎麼對select進行任何操作都沒有效果:
Js代碼
- // $("#viewTLanguage option: selected").attr("value", language);
- $("#viewTLanguage option[value='"+language+"']").attr("selected","selected");
- jquery.append(option);
于是在網上尋找一些解決辦法,偶然看了幾篇文章,頓時好像明白一點什麼。
其實完全可以在使用jquery的chosen()方法前進行操作,然後再進行chosen的方法。
Js代碼
- $("#viewOLanguage option[value='"+oLanguage+"']").attr("selected","selected");
- $("#viewOLanguage").chosen();
并且在select中去掉“data-rel="chosen"”,這樣一來,就能實作select相應項的選中了,同樣,append方法也會效果。
在網上還有一種說法是使用$("#jquery").chonse("destroy"),我也試了下,不過沒有成功。
另外還可以試試這個:
Js代碼
- jQuery Chosen.destroy().init()
重新執行個體化的方法。
ps:這篇文章之前有不完善的地方,所說的解決辦法隻解決了初始問題,卻沒有考慮到後續加載的事情。是以 ,還需要用這段代碼:
Js代碼
- $("#dialogOLanguage").trigger("liszt:updated"); //項目中可以使用
或者是新版本的中的
Js代碼
- $("#dialogOLanguage").trigger("chosen:updated"); //可能是因為隻能在新版本中使用的原因,項目中沒效果
這樣可以解決同一select不斷動态加載的問題。
另,destroy的方法還是沒有實驗成功。