利用jquery的三级联动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>$.each(arrData,function(index,value){})遍历数组</title>
<!-- <link href="reset.css" type="text/css" rel="stylesheet">-->
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
</style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>">
<script type="text/javascript">
$(document).ready(function () {
function objInit(obj){//初始化选择项
return $(obj).html("<option>请选择</option>");
}
var arrdata = {//定义一个数组保存相关数据
江西省:{
南昌市: ["文港","进贤"],
赣州: ["信丰","李渡"]
},
福建省:{
龙岩: ["永定区","新罗区"],
厦门: ["思明区","集美区"]
},
河北省:{
秦皇岛: ["海港区","开发区"],
唐山: ["卢龙","昌黎"]
}
}
//遍历数组对象
$.each(arrdata,function(pF){
$("#selF").append("<option>"+pF+"</option>");
$("#selF").on("change",function(){
objInit("#selT");
objInit("#selC");
$.each(arrdata,function(pF,pS){
// console.log(pF);
// console.log(pS);
if($("#selF option:selected").text()== pF){
//遍历数组对象，
$.each(pS,function(pT,pC){
$("#selT").append("<option>"+pT+"</option>");
})
//
$("#selT").on("change",function(){
objInit("#selC");
//遍历数组对象，
$.each(pS,function(pT,pC){
if($("#selT option:selected").text()==pT){
$.each(pC,function(index,value){
$("#selC").append("<option>"+pC[index]+"</option>");
})
}
})
})
}
})
})
})
$(".btn").on("click",function(){
var strValue="您选择的地址为:";
strValue += $("#selF option:selected").html();
strValue += " ";
strValue += $("#selT option:selected").html();
strValue += " ";
strValue += $("#selC option:selected").html();
$(".clsTip").html(strValue);
})
})
</script>
</head>
<body>
<div class="clsInt">
<h2>下拉列表框事件的应用</h2>
省份:<select id="selF"><option>请选择</option></select>
市:<select id="selT"><option>请选择</option></select>
区县:<select id="selC"><option>请选择</option></select>
<input type="button" value="查询" name="check" class="btn" id="Button1">
</div>
<div class="clsTip" id="divTip"></div>
</body>
</html>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦