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的商品展示放大镜
Aug 07 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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
header跳转和include包含问题详解
2012/09/08 PHP
php之Memcache学习笔记
2013/06/17 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
详解如何在vue中使用sass
2017/06/21 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
教师个人的自我评价分享
2014/01/02 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
个人原因辞职信模板
2015/05/13 职场文书
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技