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.location和window.open的区别
Mar 17 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
JavaScript函数模式详解
Nov 07 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
threejs太阳光与阴影效果实例代码
Apr 05 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP 进程锁定问题分析研究
2009/11/24 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
Python中psutil的介绍与用法
2019/05/02 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
企业总经理岗位职责
2014/02/13 职场文书
竞赛口号大全
2014/06/16 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏