您的位置：首页 > Web前端 > BootStrap

jquery结合bootstrap的选择框联动

2016-04-06 17:54 555 查看

1、配置bootstrap环境

2、调用jquery操作组件，利用bootstrap的JavaScript插件

3、页面1-liandong.html;页面2-liandong.js

页面1-liandong.html;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/jquery-1.12.3.js"></script>

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

</head>

<body>


<div class="btn-group">
<button type="button" id="pro" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
省份<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="proList" >

</ul>
</div>


<div class="btn-group">
<button type="button" id="city" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
城市 <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="cityList" >

</ul>
</div>

<script src="js/bootstrap.min.js"></script>

</body>
</html>

页面2-liandong.js

var sheng_json=[

{sheng:'湖北',shi:['wuhan','huanggang','jingzhou']},

{sheng:'湖南',shi:['wuhan1','huanggang1','jingzhou1']},

{sheng:'广州',shi:['wuhan2','huanggang2','jingzhou2']},

];

var sheng_length = sheng_json.length;

$(function(){



var flage = $("#proList").children().get(0);

if(flage == null){

for(var i=0;i<sheng_length;i++){

var sheng = sheng_json[i].sheng;

$("#proList").append("<li><a href=\"#\" value="+sheng+">"+sheng+"</a></li>");

}

}





$('#proList li a').on('click', function(event) {

var sheng = $(this).attr('value');

var citys = new Array();

$("#pro").html(sheng);

for(var i=0;i<sheng_length;i++){

if(sheng == sheng_json[i].sheng){

citys = sheng_json[i].shi;

break;

}

}



var flage2 = $("#cityList").children().get(0);

if(flage2 != null){

$("#cityList").empty();

$("#city").html("城市");

}

for(var j=0;j<citys.length;j++){

$("#cityList").append("<li><a href=\"#\" value="+citys[j]+">"+citys[j]+"</a></li>");

}

});





$("#city").on('click', function(event) {

$("#cityList li a").on('click', function(event) {

var city = $(this).attr('value');

$("#city").html(city);

});;

});





});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap jquery javascript 插件

相关文章推荐

新的分享

章节导航