<!DOCTYPE html>

 <html>

 <head>

 <meta charset=gbk />

 <title>selectList</title>

 <style type="text/css">

     *{margin:;padding:;}

     .selectList{width:200px;margin:50px auto;}

 </style>

 <script type="text/javascript" src="jquery1.7.1.js"></script>

 </head>

 <body>

     <div class="selectList">

         <select class="province">

             <option>请选择</option>

         </select>

         <select class="city">

             <option>请选择</option>

         </select>

         <select class="district">

             <option>请选择</option>

         </select>

     </div>

     <div class="selectList">

         <select class="province">

             <option>请选择</option>

         </select>

         <select class="city">

             <option>请选择</option>

         </select>

         <select class="district">

             <option>请选择</option>

         </select>

     </div>

     <script type="text/javascript">

     $(function(){

         $(".selectList").each(function(){

             var url = "area.json";

             var areaJson;

             var temp_html;

             var oProvince = $(this).find(".province");

             var oCity = $(this).find(".city");

             var oDistrict = $(this).find(".district");

             //初始化省

             var province = function(){

                 $.each(areaJson,function(i,province){

                     temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";

                 });

                 oProvince.html(temp_html);

                 city();

             };

             //赋值市

             var city = function(){

                 temp_html = "";

                 var n = oProvince.get().selectedIndex;

                 $.each(areaJson[n].c,function(i,city){

                     temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";

                 });

                 oCity.html(temp_html);

                 district();

             };

             //赋值县

             var district = function(){

                 temp_html = "";

                 var m = oProvince.get().selectedIndex;

                 var n = oCity.get().selectedIndex;

                 if(typeof(areaJson[m].c[n].d) == "undefined"){

                     oDistrict.css("display","none");

                 }else{

                     oDistrict.css("display","inline");

                     $.each(areaJson[m].c[n].d,function(i,district){

                         temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>";

                     });

                     oDistrict.html(temp_html);

                 };

             };

             //选择省改变市

             oProvince.change(function(){

                 city();

             });

             //选择市改变县

             oCity.change(function(){

                 district();

             });

             //获取json数据

             $.getJSON(url,function(data){

                 areaJson = data;

                 province();

             });

         });

     });

     </script>

 </body>

 </html>

SELECT 三级联动 [转]的更多相关文章

  1. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  2. jQuery实现select三级联动

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  3. Jquery select 三级联动 (需要JSON数据)

    Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...

  4. jquery select三级联动

    需求:对地区进行选择,选择相应的省,就会出现相应范围的市,然后出现相应的范围的县区:如果县不存在,就不现实,自我要求是自己写个简单的插件,方便以后调用: 逻辑:1.通过div的类名来获取,其下的sel ...

  5. js之select三级联动

    效果图如下: 代码逻辑梳理:层层递进,比如选择了课程后,将对应的课程id保存,然后点击选择章时自动触发对应的时间,根据这个课程ID获取其下面的章信息.其它的如节等,同理. 代码说明:如下代码不规范,可 ...

  6. 利用select实现年月日三级联动的日期选择效果

    × 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...

  7. [转]asp三级select菜单联动（加数据库）

    '数据库结构'类别1表名称:a 字段:ID,Name 说明:ID为主键是类别1的ID值,Name为类别1的名称'类别2表名称:aa 字段:ID,aID,Name 说明:ID为主键是类别2的ID值,aI ...

  8. jquery select选中表单特效三级联动

    好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type=& ...

  9. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

随机推荐

  1. oracle存储过程结合我公司代码1

    1.           Framework.QueryInfo info1 = new Framework.QueryInfo();            //string Sql = Holwor ...

  2. SQL0973N在 "<堆名>" 堆中没有足够的存储器可用来处理语句

    SQL0973N在 "<堆名>" 堆中没有足够的存储器可用来处理语句. 解释: 已使用此堆的所有可用内存.不能处理该语句. 用户响应: 接收到此消息(SQLCODE)后 ...

  3. DevExpress VCL 已死-----关于13.1.4的发布。

    随着DevExpress VCL 13.1.4 的发布,已基本上宣布了devexpress vcl 已经死亡了. 除了一些bug 修正,没有什么新的东西,每年的订阅费又那么贵,而且delphi 现在已 ...

  4. 2018.09.20 atcoder Painting Graphs with AtCoDeer（tarjan+polya）

    传送门 一道思维题. 如果没有环那么对答案有k的贡献. 如果恰为一个环,可以用polya求贡献. 如果是一个有多个环重叠的双联通的话,直接转化为组合数问题(可以证明只要每种颜色被选取的次数相同一定可以 ...

  5. 【转】MapReduce：详解Shuffle过程

    ——转自:{http://langyu.iteye.com/blog/992916} Shuffle过程是MapReduce的核心,也被称为奇迹发生的地方.要想理解MapReduce, Shuffle ...

  6. C++之类和对象课后习题1

    建立一个对象数组,内放5个学生的(学号,成绩),设立一个函数max,用指向对象的指针作函数参数,在max函数中找出5个学生的最高成绩者,并输出其学号. #include<iostream> ...

  7. IoC的基本概念

    一.什么是IOC ioc是一个英文缩写,英文全称是 Inversion of Control,翻译过来是“控制反转”.理解好Ioc的关键是要明确“谁控制谁,控制了什么,为何是反转,哪些方面反转了” 谁 ...

  8. jar 包和 mysql 服务器部署

    (1)创建好本地服务器: navicat新建链接: 链接名:自定义,这里命名为test 配置同jar包 (2)给予登陆权限,loclhost_3306,右击选择“命令行界面”,输入如下: create ...

  9. php读取用友u8采购入库单列表及详细

    <?php class erpData { protected static $erp; public function __construct() { $dbhost ="192.1 ...

  10. 【翻译】JavaScript框架的最终指南

    翻译原文链接 我的翻译小站 紧跟JavaScript框架的脚步是一个挑战.现在有太多的框架,几乎一个月就会出来一个新的.那么如何知道到底哪一个比较合适你的项目呢?它们分别有什么优点和缺点呢?你要如何开 ...