jquery chosen 插件 動態設置+更新選項值

0

我要在表單裏使用一個select下拉菜單（是否是multiple無所謂），因此選擇了jquery chosen這個插件。
如今有一個需求，須要根據表單的另外一個域來動態加載該select元素的選項。

1

因而很容易的開始下面幾步（固然能夠在F12調試工具下單步試驗，效果佳）：

// $.ajax({ ... success: function() { ...

// 清空select選項集
$("#select_elem").empty();

// 更新select選項（省略...）

光這樣還不夠。.empty()只能清空原生select元素的選項，不能更新chosen插件生成的選項框。
此時的效果是，點擊下拉框中的備選項，備選項不會出如今已選框裏，且備選項中的該項消失，控制檯報錯：

chosen.jquery.js:410 Uncaught TypeError: Cannot set property 'selected' of undefined

2

因而查到能夠在更新select元素後再這樣一下：

$("#select_elem").chosen("destroy")

還有的說

$("#select_elem").chosen("destroy").init()

俱無卵用。

3

繼續查，查到使用$().trigger()方法

$("#select_elem").trigger("liszt:updated")    /* 試驗可用 */

一說新版：

$("#select_elem").trigger("chosen:updated")

試驗中，前者可用。

4

綜上，

// $.ajax({ ... success: function() { ...

$("#select_elem").empty();
/* 添加新select選項（省略） */
$("#select_elem").trigger("liszt:updated");

// } });

References

參考連接1
參考連接2（特別鳴謝:-)）