bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)
<!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下拉框)的更多相关文章
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出（解决方案）
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- Bootstrap Flat UI的select下拉框显示不出来 问题解决
Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...
- JavaScript向select下拉框中加入和删除元素
JavaScript向select下拉框中加入和删除元素 1.说明 a 利用append()方法向下拉框中加入元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...
- HTML中的select下拉框内容显示不全的解决办法
HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...
- JavaScript向select下拉框中添加和删除元素
JavaScript向select下拉框中添加和删除元素 1.说明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...
- JavaScript解决select下拉框中的内容太长显示不全的问题
JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...
- JavaScript获取select下拉框中的第一个值
JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- layui select 下拉框 级联 动态赋值 与获取选中值
//下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...
随机推荐
- IOS第八天(6:UITableViewController新浪微博, 模型和 控件位置封装一起statusFrame)
*****HMViewController #import "HMViewController.h" #import "HMStatus.h" #import ...
- 增强for循环
import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java.util.Li ...
- 连连看bug记录
1.bug统计 bug1: bug现象:消除两个相同图案之间的连线跨越了其他图片. 期待现象:应该改成绕过图案呈折线形. 二者差异:折现有没有穿过其他图片. bug原因猜测:小组能力原因. 复现步骤或 ...
- Apache Spark技术实战之6 -- spark-submit常见问题及其解决
除本人同意外,严禁一切转载,徽沪一郎. 概要 编写了独立运行的Spark Application之后,需要将其提交到Spark Cluster中运行,一般会采用spark-submit来进行应用的提交 ...
- 20145218&20145240 《信息安全系统设计基础》实验一 开发环境的熟悉
20145218&20145240 <信息安全系统设计基础>实验一 开发环境的熟悉 课程:信息安全系统设计基础 班级:1452 姓名:(按贡献大小排名)刘士嘉 张晓涵 学号:(按贡 ...
- NEC学习 ---- 模块 - 左图右文图文列表
该模块效果图: 这个模块也是在开发中经常使用的一种: HTML代码: <div class="container"> <div class="m-lis ...
- ios数据库常用sql语句
SQlite常用语句 由于sql语句在程序代码中以字符串的形式存在,没有代码提示,不细心很容易出错,而且不容易被查出来.sql语句字符串是单引号. 写sql语句的时候一定要细心呀.如果写不好可以找公司 ...
- php闭包实现函数的自调用，也是递归
php的闭包可能不常用,但是在某些场合之下还是可以考虑用php的闭包来实现某些功能的,比如递归,这里讲一下用php的闭包实现递归 //php闭包实现函数的自调用,也就是实现递归 function cl ...
- Eclipse Memory Analyzer，内存泄漏插件，安装使用一条龙
网上文档很多,但最初都有问题.整理一份,作为备份.使用过程:开发代码写完后,对可能出现内存溢出的代码,添加配置文件,生成.hprof文件,用memory Analyzer分析排查问题,且泄漏内存大小可 ...
- db2常用命令大全
#显示这个DB2错误的解释信息(SQLSTATE 5位数字)db2 ? 42704 #显示这个SQLCODE的解释信息(SQLCODE 四位数字) db2 ? SQL0204N ##查看数据库指定配置 ...