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 相关文章推荐
基于jquery的一个图片hover的插件
Apr 24 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 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
php文件上传的例子及参数详解
2013/12/12 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
javascript 节点排序 2
2011/01/31 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python读取Excel实例详解
2018/08/17 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
Python中如何定义一个函数
2016/09/06 面试题
JS原生实现轮播图的几种方法
2021/03/23 Javascript
2013年员工自我评价范文
2013/12/27 职场文书
高级编程求职信模板
2014/02/16 职场文书
老师对学生的评语
2014/04/18 职场文书
毕业评语大全
2014/05/04 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android