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 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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/08/01 PHP
PHP中的use关键字概述
2014/07/23 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
Python显示进度条的方法
2014/09/20 Python
python实现简单名片管理系统
2018/11/30 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
彻底解决Python包下载慢问题
2020/11/15 Python
python中time.ctime()实例用法
2021/02/03 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
大学三年的自我评价
2013/12/25 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
园艺师求职信
2014/03/10 职场文书
热门专业求职信
2014/05/24 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
党的群众路线调研报告
2014/11/03 职场文书
党员个人自我评价
2015/03/03 职场文书
教师工作表现自我评价
2015/03/05 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android