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 相关文章推荐
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 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代码包装修正版
2008/03/15 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
用jquery来定位
2007/02/20 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
商务英语应届生自我鉴定
2013/12/08 职场文书
公证委托书模板
2014/04/03 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
法人身份证明书
2014/10/08 职场文书
热血教师观后感
2015/06/10 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书