用jquery实现三级联动

最新推荐文章于 2025-06-05 12:50:38 发布

原创最新推荐文章于 2025-06-05 12:50:38 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

基础同时被 3 个专栏收录

1 篇文章

订阅专栏

三级联动

1 篇文章

订阅专栏

jquery

0 篇文章

订阅专栏

本文介绍了如何在页面加载时预设省份选择，并通过jQuery监听省份和城市下拉框的change事件，实现在选择变化时清空并动态填充后续下拉框的内容，从而达到三级联动的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果
1、页面加载是需要有选择省份
2、编写省份下拉框change事件
3、编写城市区域下拉框change事件
4、省市的下拉框更改时要将后面的下拉框清空
实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        //创建三维数组
        var lists = new Array(2);

        lists["湖北省"] = ["武汉市","天门市"];
        lists["湖北省"]["武汉市"] =["江夏区","洪山区","青山区","黄陂区"];
        lists["湖北省"]["天门市"] = ["竟陵街道","九真镇","渔薪镇","皂市镇"];
        lists["湖南省"] =["长沙市","韶山市"];
        lists["湖南省"]["长沙市"] = ["芙蓉区","天心区","岳麓区","开福区"];
        lists["湖南省"]["韶山市"] =["清溪镇","银田镇","如意镇"];
        //创建$工厂函数用来制作省份的下拉框
      $(function(){
          //创建一个节点用pp接收
          var pp='<option value="请选择省份">请选择省份</option>';
          //将节点加到id为province的下拉框里
          $("#province").append(pp);
          //遍历省份并将省份放到下拉框里
            for (var provinceMe in lists){
                //将省份放到下拉框里
                $("#province").append('<option value='+provinceMe+'>'+provinceMe+'</option>');
            }
      })
        //制作城市的下拉列表框
        function provinceSelect(cc){
            //当选择省份的时候清空城市和区域
            $("#city").empty();
            $("#region").empty();
            //创建节点用cityMe接受
            var cityMe = '<option value="请选择城市">请选择城市</option>';
           // 将节点放到城市下拉框里
            $("#city").append(cityMe);
            //获取省份名称
            var provinceMe = $(cc).val();
            //遍历省份将城市放进去
           for (var i=0;i<lists[provinceMe].length;i++){
                //将城市放到下拉框里
               $("#city").append('<option value='+lists[provinceMe][i]+'>'+lists[provinceMe][i]+'</option>');
           }
        }
        //制作区域的下拉框
        function citySelect(region){
            //选择城市时清空区域的节点
            $("#region").empty();
            //创建节点用regionMe接收
            var regionMe = '<option value="请选择区域">请选择区域</option>';
            //将节点放到区域下拉框里
            $("#region").append(regionMe);
            //获取省份名称
            var provinceHe =$("#province").val();
            //获取城市名称
           var cityHe =$(region).val();
            //遍历循环
            for (var i =0;i<lists[provinceHe][cityHe].length;i++){
                $("#region").append('<option value='+lists[provinceHe][cityHe][i]+'>'+lists[provinceHe][cityHe][i]+'</option>');

            }
        }
    </script>
</head>
<body>
<select id="province" onchange="provinceSelect(this);"></select>
<select id="city" onchange="citySelect(this);"></select>
<select id="region"></select>

</body>
</html>