chose.jquery 联动
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title> <link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style> </head>
<body>
<form>
<div id="container">
<div id="content">
<div class="side-by-side clearfix"> <div>
<em>Into This</em>
<select id="countries" data-placeholder="选择国家..." class="chosen-select" style="width:350px;" tabindex="0">
<option value=""></option>
<optgroup label="北美">
<option value="Canada">加拿大</option>
<option value="United States">美国</option> <optgroup label="欧洲">
<option value="United Kingdom">英国</option> </optgroup>
<optgroup label="亚洲">
<option value="China">中国</option>
</optgroup> </select>
<select id="provinces" data-placeholder="选择省份..." class="chosen-select" style="width:350px;" tabindex="2">
</select>
</div>
</div> </div>
</div>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script> <script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
console.log(selector);
console.log(config[selector]);
$(selector).chosen(config[selector]);
} var provinces=[];
//provinces.push({'name':'China','provinces':[{'key':'gd','value':'广东'},{'key':'sh','value':'上海'} ]}); provinces.push({'name':'China','provinces':{'gd':'广东','sh':'上海'}});
provinces.push({'name':'Canada','provinces':{'adl':'安大略','wgh':'温哥华'}});
provinces.push({'name':'United Kingdom','provinces':{'ld':'伦敦','bmh':'伯明翰'}});
provinces.push({'name':'United States','provinces':{'ny':'纽约','dz':'德州'}});
var searchProinceByCountry=function(country)
{
for(var c in provinces)
{
if( provinces[c].name==country)
return provinces[c].provinces;
}
} $(function()
{
$("#countries").change(function()
{
var msg='';
var provs=searchProinceByCountry($(this).val()); for(var c in provs)
{
//msg=msg+'<option value="'+provs[c].key+'">'+provs[c].value+'</option>';
msg=msg+'<option value="'+c.toString()+'">'+provs[c].toString()+'</option>';
}
console.log(msg);
$("#provinces").html(msg);
$("#provinces").trigger("liszt:updated");
//$("#provinces").trigger("chosen:updated");可能是新版本里换成这个了,感觉更有意义
console.log($(this).val());
console.log($("#provinces").val());
}); $("#provinces").change(function()
{
console.log($(this).val());
}); }); </script>
</form> </body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title> <link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style> </head>
<body>
<form>
<div id="container">
<div id="content">
<div class="side-by-side clearfix"> <div>
<em>Into This</em>
<select id="countries" data-placeholder="选择国家..." class="chosen-select" style="width:350px;" tabindex="0">
<option value=""></option>
<optgroup label="北美">
<option value="Canada">加拿大</option>
<option value="United States">美国</option> <optgroup label="欧洲">
<option value="United Kingdom">英国</option> </optgroup>
<optgroup label="亚洲">
<option value="China">中国</option>
</optgroup> </select>
<select id="provinces" data-placeholder="选择省份..." class="chosen-select" style="width:350px;" tabindex="2">
</select>
</div>
</div> </div>
</div>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script> <script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) { $(selector).chosen(config[selector]);
} var provinces=[];
provinces.push({ 'China':{'gd':'广东','sh':'上海'}});
provinces.push({ 'Canada':{'adl':'安大略','wgh':'温哥华'}});
provinces.push({'United Kingdom':{'ld':'伦敦','bmh':'伯明翰'}});
provinces.push({'United States':{'ny':'纽约','dz':'德州'}}); var searchProinceByCountry=function(findCountry)
{
for(var cIdx in provinces)
{
var country=provinces[cIdx];
for(var c in country)
{
if(c==findCountry)
return country[c];
}
}
} $(function()
{
$("#countries").change(function()
{
var msg='';
var provs=searchProinceByCountry($(this).val()); for(var c in provs)
{
msg=msg+'<option value="'+c.toString()+'">'+provs[c].toString()+'</option>';
}
console.log(msg);
$("#provinces").html(msg);
$("#provinces").trigger("liszt:updated");
//$("#provinces").trigger("chosen:updated");可能是新版本里换成这个了,感觉更有意义
console.log($(this).val());
console.log($("#provinces").val());
}); $("#provinces").change(function()
{
console.log($(this).val());
}); }); </script>
</form> </body>
</html>
chose.jquery 联动的更多相关文章
- citySelect省市区jQuery联动插件
参考地址:http://blog.csdn.net/qq_33556185/article/details/50704446 参考地址:http://www.lanrenzhijia.com/jque ...
- jquery 联动 年月日
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQuery实例 - 生成年 ...
- chose.jquery 多选
<select id="language" data-placeholder="选择类别..." class="chosen-select&qu ...
- 开发一个jQuery插件——多级联动菜单
引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...
- jQuery插件——多级联动菜单
jQuery插件——多级联动菜单 引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后 ...
- 基于json的jquery地区联动探索
贴一个基于jquery联动的代码,相信这样的代码有一大把,就当是jquery的练手吧, 写这个东西的初衷是来之于新浪微博,在新浪微博帐号设置里面有个地区的选项,使用js写的,想把它的代码给截获下来,可 ...
- jQuery 菜单小练习(实现点击和移动鼠标效果)
这个代码的练习是点击事件后 如何用jQuery联动的方式找到相关标签 实现的结果是点击菜单一或者菜单二等 会出现相关菜品,并隐藏其他菜品.鼠标移动才菜品上会在右侧框内出现相关菜品的价格.实现特殊的效果 ...
- javascript开源大全
javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的 ...
- jquery 无刷新多级联动
原先不熟悉jquery时,总在寻找无刷新的方法,在此不断的积累自己所知道的jquery属性,常用方法.以下为jquery实现的无刷新联动事件 分公司: <select id="Sele ...
随机推荐
- iOS：GCD理解1（同步-异步、串行-并行）
1.并行-异步(ST1与ST2抢占资源) 1-1).获取 并行(全局)队列 ,DISPATCH_QUEUE_PRIORITY_DEFAULT 为默认优先级. dispatch_queue_t queu ...
- Mac下查看端口占用
netstat命令 netstat -an | grep 端口号 lsof命令 lsof -i:端口号
- Navicat软件中mysql中int、bigint、smallint和tinyint的区别、布尔类型存储以及乱码问题的解决
很长时间不写博客了,最近一直在忙这学校的比赛都忘记更新博客了.新的任务又要开始了,我们要准备<2017年中国大学生计算机设计大赛软件服务外包竞赛>.这次不能再想像之前那样有PC端的功能作为 ...
- 二维码合成，将苹果和安卓（ios和android）合成一个二维码，让用户扫描一个二维码就可以分别下载苹果和安卓的应用
因为公司推广的原因,没有合适的将苹果和安卓(ios和android)合成一个二维码的工具. 因为这个不难,主要是根据浏览器的UA进行判断,所以就自己开发了一个网站 网站名称叫:好推二维码 https ...
- GCC 预处理、编译、汇编、链接..
1简介 GCC 的意思也只是 GNU C Compiler 而已.经过了这么多年的发展,GCC 已经不仅仅能支持 C 语言:它现在还支持 Ada 语言.C++ 语言.Java 语言.Objective ...
- 前端开发---ppt展示页面评论区支持动态交互效果
1. 工程地址:https://github.com/digitalClass/web_page 网站发布地址: http://115.28.30.25:8029/ 2. 用到的技术主要还是jquer ...
- [Erlang 0116] 当我们谈论Erlang Maps时,我们谈论什么 Part 1
Erlang 增加 Maps数据类型并不是很突然,因为这个提议已经进行了2~3年之久,只不过Joe Armstrong老爷子最近一篇文章Big changes to Erlang掀起不小了风 ...
- HDOJ 2317. Nasty Hacks 模拟水题
Nasty Hacks Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...
- Gearman使用示例
最近的一个旧项目重构过程中,使用到了gearman这个开源项目,简单来讲,这是一个类似MQ的异步系统,一边派发任务,一边处理任务(有类似MQ中的消息发送方与接收方),目前支持java,php等多种语言 ...
- 初探Socket
使用Socket Socket是两台主机之间的一个连接,它可以完成7个操作. 连接远程机器 发送数据 接收数据 关闭连接 绑定端口 监听入站数据 在绑定端口上接受来自远程机器的连接 Java中的Soc ...