1. 程式人生 > >Jquery chosen動態設定值 select Ajax動態載入資料 設定chosen和獲取他們選中的值

Jquery chosen動態設定值 select Ajax動態載入資料 設定chosen和獲取他們選中的值


  在做一個編輯對話方塊時,要對裡面帶有select option的操作。主要是想動態載入option和對option的選中。但是由於專案中使用了jquery裡的chosen()方法,怎麼也無法實現效果。原碼如下:

Java程式碼  
  1. <select id="viewOLanguage" data-rel="chosen">  
  2.     <option value="zh">簡體中文(簡體中文 Chinese)</option>  
  3.     <option value="en">English(英語 English)</option>  
  4.     <option value="fr">français(法語 French)</option>  
  5.     <option value="de">Deutsch(德語 German)</option>  
  6.     <option value="it">italiano(義大利語 Italian)</option>  
  7.     <option value="es">español(西班牙語 Spanish)</option>  
  8.     <option value="ru">русский(俄語 Russian)</option>  
  9.     <option value="ja">日本語(日語 Japanese)</option>  
  10.     <option value="ko">한국어(韓語 Korean)</option>  
  11. </select>  
  12. <select id="tLanguage" multiple="multiple" data-rel="chosen" style="width: 80%" >  
  13.     <option value="zh">簡體中文(簡體中文 Chinese)</option>  
  14.     <option value="en"
    >English(英語 English)</option>  
  15.     <option value="fr">français(法語 French)</option>  
  16.     <option value="de">Deutsch(德語 German)</option>  
  17.     <option value="it">italiano(義大利語 Italian)</option>  
  18.     <option value="es">español(西班牙語 Spanish)</option>  
  19.     <option value="ru">русский(俄語 Russian)</option>  
  20.     <option value="ja">日本語(日語 Japanese)</option>  
  21.     <option value="ko">한국어(韓語 Korean)</option>  
  22. </select>  

在引用的js檔案中使用了這樣的程式碼:

Js程式碼  
  1. //chosen - improves select  
  2. $('[data-rel="chosen"],[rel="chosen"]').chosen();  

然後在自己的私有js檔案中怎麼對select進行任何操作都沒有效果:

Js程式碼  
  1. //  $("#viewTLanguage option: selected").attr("value", language);  
  2.     $("#viewTLanguage option[value='"+language+"']").attr("selected","selected");  
  3.          jquery.append(option);  

於是在網上尋找一些解決辦法,偶然看了幾篇文章,頓時好像明白一點什麼。

其實完全可以在使用jquery的chosen()方法前進行操作,然後再進行chosen的方法。

Js程式碼  
  1. $("#viewOLanguage option[value='"+oLanguage+"']").attr("selected","selected");  
  2. $("#viewOLanguage").chosen();  

並且在select中去掉“data-rel="chosen"”,這樣一來,就能實現select相應項的選中了,同樣,append方法也會效果。

在網上還有一種說法是使用$("#jquery").chonse("destroy"),我也試了下,不過沒有成功。

另外還可以試試這個:

Js程式碼  
  1. jQuery Chosen.destroy().init()  

重新例項化的方法。

 ps:這篇文章之前有不完善的地方,所說的解決辦法只解決了初始問題,卻沒有考慮到後續載入的事情。所以 ,還需要用這段程式碼:

Js程式碼  
  1. $("#dialogOLanguage").trigger("liszt:updated");  //專案中可以使用

 或者是新版本的中的

Js程式碼  
  1. $("#dialogOLanguage").trigger("chosen:updated");  //可能是因為只能在新版本中使用的原因,專案中沒效果

這樣可以解決同一select不斷動態載入的問題。

另,destroy的方法還是沒有實驗成功。