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 sqlite 的各种操作
iOS --SQL的增加.删除.查找.修改 iOS对于数据库的操作:增加.删除.查找.修改 首先需要创建一个数据库:本程序的数据库是在火狐浏览器里的插件里写的微量型数据库 火狐找查找SQLite Ma ...
- Centos7安装完毕后无法联网的解决方法
/etc/sysconfig/network-scripts/ 用ls命令查看网卡配置文件名(在CENTOS7中网卡名貌似变成了随机数字,所以每台机器的网卡名并不相同)
- plain framework 商业版 开发总结1 updated
每天对着不同的计划,多多少少有一种无形的压力.特别是对技术不好的我来说,过程中遇到的问题实在不少,时常纠结良久.时间慢慢流逝,最后虽然感觉有些不足,但是也不至于差强人意.商业版的PF核心已经升级到1. ...
- POJ 3254. Corn Fields 状态压缩DP (入门级)
Corn Fields Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9806 Accepted: 5185 Descr ...
- 如何将网页的title前面的图标替换成自己的图标
首先要准备自己的图标,图标必须是.ico格式的图片,网上有很多在线工具可以将自己的图片转换成ico格式的图片,这里给大家介绍两个网站 在线ico转换工具:生成的图标是可以选尺寸的,原图片的大小不限制 ...
- 设计 api, url 的原则
设计 api, url 的原则 做微信公众号的项目,账号体系使用微信的 openid.现在增加需求,要求适应 web 端--做成普通的 web 项目.然后 url 的变化:我想给现有的 url 加上 ...
- 解读ASP.NET 5 & MVC6系列（8）：Session与Caching
在之前的版本中,Session存在于System.Web中,新版ASP.NET 5中由于不在依赖于System.Web.dll库了,所以相应的,Session也就成了ASP.NET 5中一个可配置的模 ...
- [LeetCode] Plus One Linked List 链表加一运算
Given a non-negative number represented as a singly linked list of digits, plus one to the number. T ...
- ajax的循环
一.业务需求 在开发中,当一个列表页面加载完成后,我需要根据列表每一项的id去服务器端获取对应的数据然后再把获取的数据赋给当前id对应的标签. 例如如下表格: 我有一系列的商品编号,我需要根据商品编号 ...
- VS2010快捷键设置
1.进入工具----选项 对话框 2.选择 环境---->键盘 3. 在 [显示命令包含] 下面的对话框中输入"对齐"关键字,然后就会在这个编辑框下面一个文本窗口中显示关 ...