html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <style>
- select{
- width:100px;
- }
- </style>
- </head>
- <body>
- <select name=""id="province"onchange="pro(this.value)">
- <option value="请选择省份"> 请选择省份 </option>
- </select>
- <select name=""id="city"onchange="cit(this.value)">
- <option value="请选择省份"> 请选择城市 </option>
- </select>
- <select name=""id="country">
- <option value="请选择省份"> 请选择县 </option>
- </select>
- <script src="https://cdn.bootCSS.com/jquery/3.0.0/jquery.min.js"></script>
- <script>
- var data={
- '湖南':{
- "常德" :["石门","桃源","临澧","汉寿"],
- "益阳":["益阳 1","益阳 2","益阳 3"],
- "岳阳":["岳阳 1","岳阳 2","岳阳 3","岳阳 4","岳阳 5","岳阳 6","岳阳 7"],
- "永州":["永州 1","永州 2"],
- "郴州":["郴州 1","郴州 2","郴州 3"],
- "湘潭":["湘潭 1","湘潭 2","湘潭 3"]
- },
- '广东':{
- "广州":["广州 1","广州 2","广州 3"],
- "珠海":["珠海 1","珠海 2","珠海 3"],
- "佛山":["佛山 1"]
- },
- '河南':{
- "郑州":["惠济","中原","二七"],
- "洛阳":["洛阳 1","洛阳 2","洛阳 3"],
- "信阳":["息县","潢川","固始","商城"]
- }
- }
- var p="";
- for(var key in data){
- p+='<option>'+key+'</option>'
- }
- $('#province').append(p);
- var pname="";
- function pro(a) {
- var c="";
- $('#city').html("");
- for(var k in data[a]){
- c+='<option>'+k+'</option>'
- }
- $('#city').append(c);
- pname=a;
- }
- function cit(a) {
- var cou="";
- $('#country').html("");
- for(var k in data[pname][a]){
- cou+='<option>'+data[pname][a][k]+'</option>'
- }
- $('#country').append(cou);
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/43450/9f42dd4e3aec8dee13924a7477589e16.html