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 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
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 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
简单谈谈python的反射机制
2016/06/28 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
解决python 输出是省略号的问题
2018/04/19 Python
Python中的Numpy矩阵操作
2018/08/12 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
python自动化发送邮件实例讲解
2021/01/04 Python
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
献爱心标语
2014/06/21 职场文书
高中开学感言
2015/08/01 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android