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 相关文章推荐
Javascript 陷阱 window全局对象
Nov 26 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
JavaScript 事件系统
Jul 22 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 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邮件发送,php发送邮件的类
2011/03/24 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
php工具型代码之印章抠图
2018/07/18 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
js实现抽奖的两种方法
2020/03/19 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
Python 文件和输入输出小结
2013/10/09 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
创意广告词
2014/03/17 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
旷课检讨书
2015/01/26 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
JavaScript实现简单图片切换
2021/04/29 Javascript
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
Java 多线程协作作业之信号同步
2022/05/11 Java/Android