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 ...

随机推荐

MarkdownPad 2 常用快捷键
Ctrl + I : 斜体 Ctrl + B : 粗体 Ctrl + G : 图片 Ctrl + Q : 引用 Ctrl + 1 : 标题 1 Ctrl + 2 : 标题 2 Ctrl + 3 : 标 ...
iOS - 捕获应用程序崩溃日志
作为一名iOS移动应用开发者,为了确保你的应用程序正确无误,在将应用程序提交到应用商店之前,你必定会进行大量的测试工作:而且在你测试的过程中应用程序运行的很好,但是在应用商店上线之后,还是有用户抱怨应 ...
在VMware上安装Linux(CentOS)
1. 新建虚拟机 2. 新建虚拟机向导 3. 创建虚拟空白光盘 4. 安装Linux系统对应的CentOS版 5. 虚拟机命名和定位磁盘位置 6. 处理器配置,看自己是否是双核.多核 7. 设置内存为 ...
ASP.NET MVC 3 网站优化总结(三)Specify Vary: Accept-Encoding header
继续进行 ASP.NET MVC 3 网站优化工作,使用 Google Page 检测发现提示 You should Specify Vary: Accept-Encoding header,The ...
读《乔布斯的NeXT和苹果之间，隔了这两个创业常识》
原文链接:http://wwww.huxiu.com/article/114950/1.html 前言: 当今硅谷风头最劲的风险投资家马克·安德森曾说,硅谷每年大约诞生15-20家真正值得投资的公司. ...
C#相关开发视频
Quickly Generate C# Classes from JSON Responses .NET Compiler Platform ("Roslyn") for the ...
JCIP chap3 share objects
"同步"确保了操作的原子性执行,但它还有其它重要的方面:memory visibility.我们不但要确保当一个线程在使用一个对象的时候,其它线程不能修改这个对象,而且还要保证该线 ...
(转)socket Aio demo
原文地址: https://my.oschina.net/tangcoffee/blog/305656 参考文档: http://my.oschina.net/u/862897/blog/164425 ...
第9章 Shell基础（4）_Bash的运算符及环境变量配置文件
5. Bash的运算符 5.1 数值运算与运算符 5.1.1 declare 声明变量类型:#declare [+/-] [选项] 变量名选项说明 - 给变量设定类型属性 + 取消变量的类型属性 ...
杂项之使用qq邮箱发送邮件
杂项之使用qq邮箱发送邮件本节内容特殊设置测试代码 1. 特殊设置之前QQ邮箱直接可以通过smtp协议发送邮件,不需要进行一些特殊的设置,但是最近使用QQ邮箱测试的时候发现以前使用的办法无法奏 ...

chose.jquery 联动

chose.jquery 联动的更多相关文章

随机推荐

热门专题