jquery chosen 插件 动态设置+更新选项值
阿萨 2018-03-23 来源 :网络 阅读 1446 评论 0

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

我要在表单里使用一个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");

// } });

希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!


本文由 @阿萨 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved