jQuery实现省市区三级联动

最新推荐文章于 2024-07-21 02:56:05 发布

Ys@_yxl

最新推荐文章于 2024-07-21 02:56:05 发布

阅读量3k

点赞数 3

本文链接：https://blog.csdn.net/weixin_45817492/article/details/115091131

版权

jQuery实现省市区三级联动

1.导入jQuery文件

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

2.定义声明省市区并赋值

var sheng=['广西省','广东省','福建省'];
var shi=[['桂林市','南宁市','河池市'],['广州市','深圳市','佛山市'],['三明市','福州市','厦门市']]
var xian=[
[['阳朔县','永福县','兴坪县'],['隆安县','宾阳县','横县'],['巴马县','东兰县','凤山县']],
[['白云区','天河区','花都区'],['福田区','南山区','罗湖区'],['南海区','高明区','顺德区']],
[['明溪县','宁化县','沙县'],['罗源县','连江县','永清县'],['思明区','集美区','同安区']]
];

3.将使用的省份数据遍历到对应的option中去。

 for(var i=0;i<sheng.length;i++)
    {
        $("#list1").append('<option>'+sheng[i]+'</option>');
    }

效果图，如图所示
在这里插入图片描述

3.1对省下拉框进行监听。（每次选择省，先清除市级县级下拉框，再获取选中选项的索引值，然后根据索引获取相对的市级，最后利用循环对市级下拉框进行赋值）

$("#list1").change(function()//对省级下拉框进行监听
    {
        $("#list2").children("option").not(":eq(0)").remove();//每次选择省，清除市级下拉框
        $("#list3").children("option").not(":eq(0)").remove();//每次选择省，清除县级级下拉框
        one=$(this).children("option:selected").index();  //获取选中选项的索引值
        str=shi[one-1];//根据索引获取相对的市级
    for(var j=0;j<str.length;j++)//利用循环对市级下拉框进行赋值
    {
        $("#list2").append('<option>'+str[j]+'</option>');
    }
}
);

效果图，如图所示
在这里插入图片描述

3.2对市下拉框进行监听。（每次选择省，先清除县级下拉框，再获取选中选项的索引值，在县级数组中找到相应的县或区，最后利用循环对县级下拉框进行赋值）

$("#list2").change(function()
{
$("#list3").children("option").not(":eq(0)").remove();
two=$(this).children("option:selected").index();//获取选中的市级选项的索引值
//alert(one);
//alert(two);
stt=xian[one-1][two-1];//在县级数组中找到相应的县或区
for(var z=0;z<stt.length;z++)
{
$("#list3").append('<option>'+stt[z]+'</option>');
}
}
);

效果图，如图所示在这里插入图片描述
具体实现
当选择省时，创建对应的市子对象，并将其加入父元素中。当选择某一个市时，创建对应的区子对象，并将其加入父元素中。当选择其他省/市时，对应的市、区/区的选项都变为请选择。要注意：在每次重新选择时，需要将其余select标签的options元素的长度为1，即做一次清空。

4.完整代码

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery制作三级联动菜单</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" >

$(document).ready(function() {
var sheng=['广西省','广东省','福建省'];
var shi=[['桂林市','南宁市','河池市'],['广州市','深圳市','佛山市'],['三明市','福州市','厦门市']]
var xian=[
[['阳朔县','永福县','兴坪县'],['隆安县','宾阳县','横县'],['巴马县','东兰县','凤山县']],
[['白云区','天河区','花都区'],['福田区','南山区','罗湖区'],['南海区','高明区','顺德区']],
[['明溪县','宁化县','沙县'],['罗源县','连江县','永清县'],['思明区','集美区','同安区']]
];

var one;
var two;
var str;
var stt;
    for(var i=0;i<sheng.length;i++)
    {
        $("#list1").append('<option>'+sheng[i]+'</option>');
    }


    $("#list1").change(function()//对省级下拉框进行监听
    {
        $("#list2").children("option").not(":eq(0)").remove();//每次选择省，清除市级下拉框
        $("#list3").children("option").not(":eq(0)").remove();//每次选择省，清除县级级下拉框
        one=$(this).children("option:selected").index();  //获取选中选项的索引值
        str=shi[one-1];//根据索引获取相对的市级
    for(var j=0;j<str.length;j++)//利用循环对市级下拉框进行赋值
    {
        $("#list2").append('<option>'+str[j]+'</option>');
    }
}
);


$("#list2").change(function()
{
$("#list3").children("option").not(":eq(0)").remove();
two=$(this).children("option:selected").index();//获取选中的市级选项的索引值
//alert(one);
//alert(two);
stt=xian[one-1][two-1];//在县级数组中找到相应的县或区
for(var z=0;z<stt.length;z++)
{
$("#list3").append('<option>'+stt[z]+'</option>');
}
}
);


});
</script>
</head>
<body>
<select id="list1">
<option>--请选项--</option>
</select> 


<select id="list2">
<option>--请选项--</option>
</select>


<select id="list3">
<option>--请选项--</option>
</select>


</body>
</html>

回顾相关知识点
1、使用$(document).ready(function)，在文档加载后激活函数。当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

使用$(document).ready(function)，可以极大的提高 Web 应用程序的速度。需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。

2、eq（）方法
作用:获取指定索引对应的标签并且包装成jQuery对象返回
没有参数:返回一个空的jQ对象(不是this)
001 参数是正数
002 参数是负数如果是-1,表示获取倒数第一个
3、 remove()方法
删除操作，把选中的指定标签删除掉(删除标签和内容和子标签)

4、基本选择器

 ID选择器：$("#myDiv") 匹配唯一的具有此id值的元素 

 类选择器：$(".myClass") 匹配具有此类样式值的所有元素

 标签选择器：$("div") 匹配指定标签名称的所有元素 

 通配符选择器：$("*") 匹配所有元素 

 并集选择器：$("div,span,p.myClass") 联合所有匹配的选择器 

 交集选择器：$("p.myClass") 匹配到p标签里面的类名 不常用