jquery chosen 插件动态设置+更新选项值

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

酒量小的人字拖 · 单声_百度百科· 2 月前 ·

英俊的茴香 · 臺北賓館-假日開放參觀· 3 月前 ·

急躁的绿茶 · 读图︱苏联红军军服和德军军服· 3 月前 ·

小眼睛的毛豆 · 十大：世界最佳鋼琴品牌[10] | ...· 3 月前 ·

想出家的电梯 · 从《大鱼海棠》看国产动画电影的“二次元创业”· 5 月前 ·

我要在表单里使用一个select下拉菜单（是不是multiple无所谓），所以选择了jquery chosen这个插件。现在有一个需求，需要根据表单的另一个域来动态加载该select元素的选项。

于是很容易的开始下面几步（当然可以在 F12 调试工具下单步试验，效果佳）：

// $.ajax({ ... success: function() { ...
// 清空select选项集
$("#select_elem").empty();
// 更新select选项（省略...）
光这样还不够。.empty()只能清空原生select元素的选项，不能更新chosen插件生成的选项框。
此时的效果是，点击下拉框中的备选项，备选项不会出现在已选框里，且备选项中的该项消失，控制台报错：
chosen.jquery.js:410 Uncaught TypeError: Cannot set property 'selected' of undefined
于是查到可以在更新select元素后再这样一下：
$("#select_elem").chosen("destroy")
$("#select_elem").chosen("destroy").init()
俱无卵用。
继续查，查到使用$().trigger()方法
$("#select_elem").trigger("liszt:updated") /* 试验可用 */
一说新版：
$("#select_elem").trigger("chosen:updated")
试验中，前者可用。
// $.ajax({ ... success: function() { ...
$("#select_elem").empty();
/* 添加新select选项（省略） */
$("#select_elem").trigger("liszt:updated");
// } });