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 相关文章推荐
屏蔽Flash右键信息的js代码
Jan 17 Javascript
js中typeof的用法汇总
Dec 12 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 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
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
vue eslint简要配置教程详解
2019/07/26 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python PIL模块与随机生成中文验证码
2016/02/27 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
python 整数越界问题详解
2019/06/27 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
python多线程和多进程关系详解
2020/12/14 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
工程质量承诺书
2014/03/27 职场文书
食品质检员岗位职责
2015/04/08 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
开学随笔
2015/08/15 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
如何利用golang运用mysql数据库
2022/03/13 Golang