jQuery库+distpicker库实现省市区三级联动效果（超简单版）

小马不认输

已于 2023-12-24 13:05:53 修改

阅读量1.2k

点赞数 25

文章标签： jquery 前端 javascript

于 2023-12-24 13:04:16 首次发布

本文链接：https://blog.csdn.net/mqh16696033405/article/details/135180352

版权

介绍

创建一个省-市-区 (省市区) 三级联动下拉列表，用于选择中国的地理位置。这种功能通常用在用户需要选择其位置的表单中，本文将使用 jQuery 和distpicker库实现省-市-区 (省市区) 三级联动下拉列表distpicker，实现效果图如下：

准备工作：引入所需的库

要设置级联下拉列表，我们首先需要包含 jQuery 库和distpicker插件。您可以从本地来源或通过 CDN 包含这些资源，大家可以根据自身需求进行选择。

1.CDN

可以使用内容交付网络 (CDN) 来包含这些库。CDN 可以提供更快的访问速度并减少服务器的负载

注意：在文件里直接引入即可，不用做其他配置和操作

         <!--    jsDelivr CDN 引入了 jQuery 库的压缩（minified）版本-->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <!--从 jsDelivr CDN 引入了 distpicker库-->
    <script src="https://cdn.jsdelivr.net/npm/distpicker/dist/distpicker.min.js"></script>

2.本地

如果您已下载这些库并将它们托管在您的服务器上，则可以直接包含它们。如果您想确保版本一致性或者您在互联网访问受限的环境中工作，则此方法非常有用。

注意：下面路径不能直接复制，需要通过上述cdn对应网址访问，复制内容，然后在自己的项目里创建jQuery.js文件和distpicker.js文件，将相应内容放入，然后根据你的具体路径即可引用

         <!-- 引入jQuery库   -->
    <script src="/ajax/webjars/jquery/3.7.1/jquery.min.js" type="text/javascript"></script>
        <!--引入js的distpicker库-->
    <script src="/ajax/js/distpicker.min.js"></script>

HTML 结构

我们使用三个<select>元素，每个元素代表地理层次结构的一级：省份 ( province)、城市 ( city) 和地区 ( district)。这些元素被包装在一个带有 id 的 div 中distpicker。此设置对于正确初始化插件至关重要distpicker。


<style>
        select{
            width: 100px;
        }
        option{
            width: 50px;
        }
</style>

<body>
<div id="distpicker" class="distpicker">
    <!-- 省份选择 -->
    <select id="province" name="province" ></select>
    <!-- 城市选择 -->
    <select id="city" name="city" ></select>
    <!-- 地区选择 -->
    <select id="district" name="district"></select>

</div>
</body>

初始化Distpicker

我们使用一个简单的 jQuery 命令$("#distpicker").distpicker();来初始化divdistpicker上的插件distpicker。它将我们的普通<select>元素转变为动态的、互连的下拉系统。

<script type="text/javascript">
    // 初始化Distpicker
    $("#distpicker").distpicker();
</script>

该distpicker库拥有中国省、市和地区的预定义数据集。当用户从第一个下拉列表中选择一个省份时，distpicker更新第二个下拉列表（城市）以仅显示该省份的城市。同样，当用户选择一个城市时，第三个下拉列表（地区）将更新为仅显示该城市的地区。这确保了选择始终一致且彼此相关，从而提供流畅且用户友好的体验。

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

        <!-- 引入jQuery库   -->
    <script src="/ajax/webjars/jquery/3.7.1/jquery.min.js" type="text/javascript"></script>
        <!--引入js的distpicker库-->
    <script src="/ajax/js/distpicker.min.js"></script>

    <!-- 也可以直接用cdn引入-->
    <!--    jsDelivr CDN 引入了 jQuery 库的压缩（minified）版本-->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <!--从 jsDelivr CDN 引入了 distpicker库-->
    <script src="https://cdn.jsdelivr.net/npm/distpicker/dist/distpicker.min.js"></script>


    <style>
        select{
            width: 100px;
        }
        option{
            width: 50px;
        }
    </style>

</head>
<body>

<div id="distpicker" class="distpicker">
    <!-- 省份选择 -->
    <select id="province" name="province" ></select>
    <!-- 城市选择 -->
    <select id="city" name="city" ></select>
    <!-- 地区选择 -->
    <select id="district" name="district"></select>

</div>
<script type="text/javascript">
    // 初始化Distpicker
    $("#distpicker").distpicker();
</script>
</body>
</html>

小马不认输

关注

25
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
2
评论
jQuery库+distpicker库实现省市区三级联动效果（超简单版）

创建一个省-市-区 (省市区) 三级联动下拉列表，用于选择中国的地理位置。这种功能通常用在用户需要选择其位置的表单中，本文将使用 jQuery 和distpicker库实现省-市-区 (省市区) 三级联动下拉列表distpicker
复制链接

扫一扫