我要在表单里使用一个select下拉菜单(是不是multiple无所谓),所以选择了jquery chosen这个插件。现在有一个需求,需要根据表单的另一个域来动态加载该select元素的选项。
于是很容易的开始下面几步(当然可以在 F12 调试工具下单步试验,效果佳):
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"); // } });
光这样还不够。.empty()只能清空原生select元素的选项,不能更新chosen插件生成的选项框。此时的效果是,点击下拉框中的备选项,备选项不会出现在已选框里,且备选项中的该项消失,控制台报错:
.empty()
chosen.jquery.js:410 Uncaught TypeError: Cannot set property 'selected' of undefined
于是查到可以在更新select元素后再这样一下:
$("#select_elem").chosen("destroy")
$("#select_elem").chosen("destroy").init()
俱无卵用。
继续查,查到使用$().trigger()方法
$().trigger()
$("#select_elem").trigger("liszt:updated") /* 试验可用 */
一说新版:
$("#select_elem").trigger("chosen:updated")
试验中,前者可用。
// $.ajax({ ... success: function() { ... $("#select_elem").empty(); /* 添加新select选项(省略) */ $("#select_elem").trigger("liszt:updated"); // } });