Jquery chosen动态设置值实例介绍


Posted in Javascript onAugust 08, 2013

Jquery chosen 地址:https://github.com/harvesthq/chosen
一款选择插件,支持检索,多选,但不支持输入效果如下图
Jquery chosen动态设置值实例介绍 
确定是用的这个哦, 不然可往下看也没有什么意义了
突然发现如果用在省市选择发现有如下问题:
1,不能动态设置值
2,不能动态设置选中
看了好几遍API愣是米有发现有方法可以直接调用。没办法就看源码,发现在其初始化的时候有一个判断如下图:
Jquery chosen动态设置值实例介绍 
发现有个destroy是不是("#city).chosen("destroy");就可以了呢。把猜想试了一下果然可以。在这之前调试过其生成的dom想通过直接将其生成的dom移除掉,结果是不可行的,能移除掉,但是就再也无法初始化了。浪费了二三个小时哇。
首先解决第一个问题

<SPAN style="WHITE-SPACE: pre"> </SPAN>$("#province").change(function(){ 
$("#city").html(""); 
$("#city").chosen("destroy"); 
$("<option value='-1'>-全部-</option>").appendTo("#city"); 
$.getJSON("${ctx}/api/getCityByProvinceJson.jsp",{ 
province:$("#province").val() 
},function(data){ $.each(data,function(i){ 
$("<option value='"+data[i].city+"'>"+data[i].city+"</option>").appendTo("#city"); 
}); 
$("#city").attr("multiple",true); 
$("#city").chosen({ 
no_results_text : "未找到此选项!", 
width:"70%" 
}); 
}); 
}); 
$("#city").chosen({ 
no_results_text : "未找到此选项!", 
width:"70%" 
});

这样便可动态设置值了,感觉代码有点重复,但是目前还没有找到比较好的方法
下面解决第二个问题
用法跟上面相似,先给select设置值再用初始化下拉框,代码如下:
<SPAN style="WHITE-SPACE: pre"> </SPAN>$("#city").val("上海"); 
$("#city").chosen({ 
no_results_text : "未找到此选项!", 
width:"70%" 
});

这样便可以动态设置选中了
Javascript 相关文章推荐
ie支持function.bind()方法实现代码
Dec 27 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
extjs两个tbar问题探讨
Aug 08 #Javascript
JS实现随机数生成算法示例代码
Aug 08 #Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 #Javascript
js 为label标签和div标签赋值的方法
Aug 08 #Javascript
JS模拟自动点击的简单实例
Aug 08 #Javascript
动态改变div的z-index属性的简单实例
Aug 08 #Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 #Javascript
You might like
Yii数据库缓存实例分析
2016/03/29 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
javascript 动态添加表格行
2006/06/22 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
python实现爬取图书封面
2018/07/05 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
用python实现名片管理系统
2020/06/18 Python
PyTorch-GPU加速实例
2020/06/23 Python
Python装饰器结合递归原理解析
2020/07/02 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
自我鉴定写作要点
2014/01/17 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
出差报告怎么写
2014/11/06 职场文书
2014年终个人总结报告
2015/03/09 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers