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 单选框,多选框美化代码
Aug 01 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
WebPack工具运行原理及入门教程
Dec 02 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
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
小程序实现录音功能
2020/09/22 Javascript
python内存管理分析
2015/04/08 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
详解Django的CSRF认证实现
2018/10/09 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
学生会竞聘书范文
2014/03/31 职场文书
物流管理专业求职信
2014/05/29 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
2014年教师工作总结
2014/11/10 职场文书
公司庆典主持词
2015/07/04 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书