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 Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
如何提高数据访问速度
Dec 26 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 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
How do I change MySQL timezone?
2008/03/26 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
详解Bootstrap插件
2016/04/25 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
详细介绍Python中的偏函数
2015/04/27 Python
python使用append合并两个数组的方法
2015/04/28 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
wxPython之解决闪烁的问题
2018/01/15 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
PHP面试题附答案
2015/11/28 面试题
人事部经理岗位职责
2014/03/07 职场文书
爱情寄语大全
2014/04/09 职场文书
室内趣味活动方案
2014/08/24 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
四年级小学生评语
2014/12/26 职场文书