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代码
Sep 07 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 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抽象工厂模式(Elgg)
2010/03/21 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
javascript实现简易聊天室
2019/07/12 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Python sorted函数详解(高级篇)
2018/09/18 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
小学教师自我鉴定
2013/11/07 职场文书
竞选班委演讲稿
2014/04/28 职场文书
广告宣传策划方案
2014/05/21 职场文书
应届生求职信范文
2014/05/26 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python