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 ...
随机推荐
- Google C++单元测试框架GoogleTest---Google Mock简介--概念及基础语法
就在昨天终于做了gtest的分享,我的预研工作终于结束了,感觉离我辞职的日子不远了,毕竟是专注java二百年啊,要告别实习啦.. 这篇是GoogleMock的简介文档,会在后边附带一个自己的例子. 一 ...
- Unable to simultaneously satisfy constraints.
在进行版本的迭代更新时,新功能需求需要对主页面的UI进行重新的布局,但是,报了错误,出了好多约束方面的问题: Unable to simultaneously satisfy constraints. ...
- H5 表格标签基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- SVN使用_获取某版本后改动的文件列表
本章将讲解如何通过svn命令获取某版本后改动的所有文件 一键操作,告别svn log的繁杂对比工作. 1:安装SVN命令行工具Subversion(不是TortoiseSVN) 下载Subversio ...
- 【译】Spring 4 Hello World例子
前言 译文链接:http://websystique.com/spring/spring-4-hello-world-example-annotation-tutorial-full-example/ ...
- Python导出Excel为Lua/Json/Xml实例教程（二）：xlrd初体验
Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出E ...
- python3: error while loading shared libraries: libpython3.5m.so.1.0: cannot open shared object file: No such file or directory
安装python3遇到报错: wget https://www.python.org/ftp/python/3.5.2/Python-3.5.2.tgz ./configure --prefix=/u ...
- x01.TodoList：Asp.Net 5 初探
ASP.NET 5 是比较新的,除了汤姆的博文,学习资料并不多.而学习没有例子上手,是比较痛苦的. 1.运行 vs2015,新建项目,选择 Asp.Net 5 WebApp 模板,默认运行即可.对照汤 ...
- 常用算法——排序（一）
排序(Sort)是计算机程序设计中的一种重要操作,也是日常生活中经常遇到的问题.例如,字典中的单词是以字母的顺序排列,否则,使用起来非常困难.同样,存储在计算机中的数据的次序,对于处理这些数据的算法的 ...
- [LeetCode] Generalized Abbreviation 通用简写
Write a function to generate the generalized abbreviations of a word. Example: Given word = "wo ...