简单jquery实现select三级联动

jQuery实现三级联动

原创

已于 2022-10-25 18:14:25 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

于 2017-07-03 15:56:11 首次发布

本文介绍了一种使用jQuery实现的省市区三级联动效果。通过加载JSON数据动态生成下拉选项，并在选择省市区时进行联动更新。

简单的jquery实现select三级联动

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>selectList</title>
 6 <style type="text/css">
 7     *{
   
   margin:0;padding:0;}
 8     .selectList{
   
   width:200px;margin:50px auto;}
 9 </style>
10 <script type="text/javascript" src="jquery1.7.1.js"></script>
11 </head>
12 <body>
13     <div class="selectList">
14         <select class="province">
15             <option>请选择</option>
16         </select>
17         <select class="city">
18             <option>请选择</option>
19         </select>
20         <select class="district">
21             <option>请选择</option>
22         </select>
23