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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
Javascript打印网页部分内容的脚本
Nov 17 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
php DES加密算法实例分析
2019/09/18 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
javascript轮播图算法
2016/10/21 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
python 日志 logging模块详细解析
2020/03/31 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
酒店中秋节活动方案
2014/01/31 职场文书
《恐龙》教学反思
2014/04/27 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
技术员岗位职责范本
2015/04/11 职场文书
学校通报表扬范文
2015/05/04 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
python和anaconda的区别
2022/05/06 Python