<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap中table页面做省市区级联效果</title>
    <script type="text/javascript" src="../../../media/js/timeStamp.js"></script>
    <link rel="stylesheet" href="../../../media/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../../../media/css/dzg.css" />
    <script type="text/javascript" src="../../../media/allUrl/allUrl.js"></script>
    <script type="text/javascript" src="../../../media/js/jquery-min.js"></script>
</head>
<body style="background-color:white;">
<div id="content" class="content">
    <div class="system_box content_box">
        <div class="system_box1">
            <div class="popup_content">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#deviceManage" data-toggle="tab">分组管理</a></li>
                    <li><a href="#members" data-toggle="tab">好友列表</a></li>
                    <li><a href="#shopM" data-toggle="tab">店铺管理</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="deviceManage">
                        <div class="content_tab" id="deviceManage_content_tab" >
                            <ul class="tab_tr"><li class="tab_td1">名称</li></ul>
                            <div class="popup_content">
                                <ul id="myTab1" class="nav nav-tabs">
                                    <li class="active"><a href="#firstS" id="firstS1" data-toggle="tab">请选择1</a></li>
                                    <li><a href="#secondS" id="secondS1" data-toggle="tab">请选择2</a></li>
                                    <li><a href="#threeS" id="threeS1" data-toggle="tab">请选择3</a></li>
                                </ul>
                                <div id="myContent" class="tab-content">
                                    <div class="tab-pane fade in active" id="firstS">
                                        <div class="content_tab" id="firstS_content_tab" ></div>
                                    </div>
                                    <div class="tab-pane fade" id="secondS">
                                        <div class="content_tab" id="secondS_content_tab"></div>
                                    </div>
                                    <div class="tab-pane fade" id="threeS">
                                        <div class="content_tab" id="threeS_content_tab"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="members">
                        <div class="content_tab" id="members_content_tab">
                            <ul class="tab_tr"><li class="tab_td1">姓名</li><li class="tab_td2">手机号码</li><li class="tab_td3">角色</li><li class="tab_td4">加入时间</li><li class="tab_td5">邀请人</li><li class="tab_td6">所在分组</li><li class="tab_td7">操作</li><li class="tab_td8"><a href="javascript:void(0)" id="inviteToGroup">邀请加入</a></li></ul>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="shopM">
                        <div class="content_tab" id="shopM_content_tab">
                            <ul class="tab_tr"><li class="tab_td1">店铺名称</li><li class="tab_td2">负责人</li><li class="tab_td2">负责人电话</li><li class="tab_td3">所属分组</li><li class="tab_td4">加入时间</li><li class="tab_td5">添加人</li></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--content结束-->
<script type="text/javascript" src="../../../media/js/dzg.js"></script>
<script type="text/javascript" src="../../../media/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../media/js/cityS.js"></script>
<script>
    //alert(provinces[0].province);
    $.each(provinces, function (i, item) {
        var options = "<a href='#' selected='selected' id='"+item.province+"' style='margin: 8px;'>" + item.province + "</a>";
        $('#firstS_content_tab').append(options);
        $('#'+ item.province+'').click(function () {
            $('#firstS1').html(item.province);
            $('#firstS1').parent('li').removeClass('active');
            $('#firstS').removeClass('active');
            $('#secondS1').parent('li').addClass('active');
            $('#secondS').addClass('active');
            $('#secondS').css('opacity','1');
            var index1=i;
            $.each(provinces[index1].city,function(i,item) {
                var options = "<a href='#' selected='selected' id='"+item.n+"' style='margin: 8px;'>" + item.n + "</a>";
                $('#secondS_content_tab').append(options);
                $('#'+ item.n+'').click(function () {
                    $('#secondS1').html(item.n);
                    $('#secondS1').parent('li').removeClass('active');
                    $('#secondS').removeClass('active');
                    $('#threeS1').parent('li').addClass('active');
                    $('#threeS').addClass('active');
                    $('#threeS').css('opacity','1');
                    var index2=i;
                    //alert(index2);
                    $.each(provinces[index1].city[index2].district,function(i,item) {
                        var options = "<a href='#' selected='selected' id='"+item+"' style='margin: 8px;'>" + item + "</a>";
                        $('#threeS_content_tab').append(options);
                        $('#'+ item+'').click(function () {
                            $('#threeS1').html(item);
                        })
                    });
                })
            });
        })
    });
</script>
</body>
</html>

bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)的更多相关文章

  1. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出（解决方案）

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  2. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  3. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  4. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  5. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  6. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  7. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  8. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  9. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

随机推荐

  1. window.self ->window.top->window.parent

    在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...

  2. JavaScript方法的调用

    1.假如是有名字的函数 调用是用名字调用,并且会把返回值赋值给接受它的参数 代码: function f() { alert("我是f"); return '我是返回值'; } f ...

  3. shell更改目录编码

    #!/ in/bash for i in `find ./laravel -type f` do iconv $i -f gbk -t utf8 -o ${i}.tmp && mv $ ...

  4. iOS图片压缩处理

    理解概念 首先,我们必须明确图片的压缩其实是两个概念: “压” 是指文件体积变小,但是像素数不变,长宽尺寸不变,那么质量可能下降. “缩” 是指文件的尺寸变小,也就是像素数减少,而长宽尺寸变小,文件体 ...

  5. JSON 数组的遍历解析

    刚遇到一个接接口任务,发现其中返回数据中,是个字符串数组,数组中就是单个json形式的内容,其实应该也可以称这种数据叫做json数组吧,只不过是字符串形式.而我需要的是将这种内容解析出来,取到对于ke ...

  6. Docker 安装部署

    Docker学习笔记 一.Ubuntu Docker 安装 (1).获取最新版本Docker安装包 lyn@lyn:/data/docker$ sudo wget -qO- https://get.d ...

  7. 简单理解php的socket编程

    php的socket编程算是比较难以理解的东西吧,不过,我们只要理解socket几个函数之间的关系,以及它们所扮演的角色,那么理解起来应该不是很难了,在笔者看来,socket编程,其实就是建立一个网络 ...

  8. Windows Server 2008 R2 辅域控制器如何升级成主域控制器

    一.实验模拟故障问题: zhuyu公司架设了一台主域控制器和一台辅域控制器,某一天,zhuyu公司的主域控制器系统崩溃,主域控制器系统也进不去. 虽然辅域控制器可以暂时代替主域控制器的普通工作,但是特 ...

  9. ubuntu 常用命令集合版（二）【大侠勿喷，菜鸟欢迎】(转)

    原文:http://page.renren.com/600759338/note/729595757 1.shutdown: 关闭系统,如果停留在TTY,请改用halt, poweroff等命令常用参 ...

  10. SQLite的使用--SQLite语句

    一.SQLite的介绍   1.为什么要存储数据?        1.1 手机数据大多都是从网络加载的,不存储,每次滚动界面都要从新发送网络请求加载数据,浪费流量      1.2 当用户没网的时候, ...