JQ实现三级联动（省市区）地址选项

最新推荐文章于 2024-06-28 13:04:07 发布

面具哥布林

最新推荐文章于 2024-06-28 13:04:07 发布

阅读量5k

点赞数 4

文章标签： html-JQ

本文链接：https://blog.csdn.net/oak160/article/details/53436591

版权

本文介绍如何利用JQuery实现三级联动效果，即省市区选择。通过读取JSON数据，监听select变动，动态更新下级选项，确保选中项与数据匹配。详细步骤包括JSON数据读取、DOM操作及事件监听。

摘要由CSDN通过智能技术生成

现在有一个需求，要求实现省市区的三级联动，效果如下：这里写图片描述
选定一个省级后，市级随省级变化。

<!DOCTYPE html>
<html>
<head>
    <title>city.html</title>
    <!----><link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>
    #t select {
        width: 150px;
        height: 40px;
        margin-left: 20px;
        font-size: 24px;
    }
</style>

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

<body>
<form class="form-horizontal" role="form"  method="post" action="" >
<div id="t">
<label for="province">省</label>
<select id="province"  name="province" onchange="loadJson2()"></select>
<label for="city">市</label>
<select id="city"  name="city"></select>
<

最低0.47元/天解锁文章

面具哥布林

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JQ实现三级联动（省市区）地址选项

现在有一个需求，要求实现省市区的三级联动，效果如下：选定一个省级后，市级随省级变化。<!DOCTYPE html><html><head> <title>city.html</title> <link rel="stylesheet" type="text/css" href="style.css"></head><style> #t select
复制链接

扫一扫