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打开新窗口方法整理
Feb 17 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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 快速生成 Flash 动画的方法
2007/03/06 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP中echo和print的区别
2014/08/28 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Python @property装饰器原理解析
2020/01/22 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
志愿者个人总结
2015/03/03 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
《司马光》教学反思
2016/02/22 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python