bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)
2024-08-29 16:09:55
<!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>
最新文章
- ZT 螨虫的话就不要跟狗多接触,狗的寄生虫很多,还有草地,
- nginx的worker_processes,worker_cpu_affinity及worker_connections
- uva202：循环小数（循环节+抽屉原理）
- bat文件的妙用1-一键开启所有开发软件
- WPF Image控件中的ImageSource与Bitmap的互相转换
- JavaScript--Date函数
- 跟我一起写Makefile-陈皓
- 数据库DML操作（DCL了解）
- Java课程设计—学生成绩管理系统(201521123002 林楚虹)
- 函数多个返回值与unpack的用法
- 初始Ajax
- Java Swing实战（二）下拉菜单组件JComboBox及其事件监听
- CALayer的上动画的暂停和恢复
- Luogu 3242 [HNOI2015]接水果
- javascript点击变绿色再点击变红色
- Dojo2 前端框架基本操作
- angular原理及模块简介
- QtWebkits如何向QtWebEngine过渡
- VUE中嵌套路由
- Android Google Map API使用的八个步骤