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 相关文章推荐
div层的移动及性能优化
Nov 16 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
浅谈开发eslint规则
Oct 01 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
js+html实现点名系统功能
Nov 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
session 加入redis的实现代码
2016/07/15 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
Vue发布项目实例讲解
2019/07/17 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
python集合用法实例分析
2015/05/30 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
保护地球的宣传语
2015/07/13 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python