js省市区三级联动
此js实现省市区三级联动效果(包含省市区code)
html代码:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="renderer" content="webkit"> <title></title> <link rel="stylesheet" href="area/jquery.inputbox.css"/> <script src="jquery.js"></script> <script src="area/js/jquery.inputbox.js"></script> <script src="area/js/jquery.ganged.js"></script> <script src="area/js/jsAddress.js"></script> <script type="text/javascript"> function add() { var provinceCode = ''; var provinceName = ''; var cityCode = ''; var cityName = ''; var areaCode = ''; var areaName = ''; var c0 = $('#province .opts .selected').attr("val"); if (c0==undefined || c0=='undefined' || c0=='-1') { alert('请选择省市'); return; } var c00 = $('#province .opts .selected').html(); var c1 = $('#city .opts .selected').attr("val"); if (c00.charAt(c00.length - 1)=='市') { if (!(c1==undefined || c1=='undefined' || c1=='-1')) { var c2 = $('#area .opts .selected').attr("val"); if (c2==undefined || c2=='undefined' || c2=='-1') { alert('请选择区/县'); return; }else{ //市-区/县 var c22 = $('#area .opts .selected').html(); areaCode = c2; areaName = c22; cityCode = c0; cityName = c00; } }else{ //市 if(!confirm("只选择市?")) { return; }else{ cityCode = c0; cityName = c00; } } }else if(!(c1==undefined || c1=='undefined' || c1=='-1')){ var c2 = $('#area .opts .selected').attr("val"); var c11 = $('#city .opts .selected').html(); if (!(c2==undefined || c2=='undefined' || c2=='-1')) { //省-市-区/县 var c22 = $('#area .opts .selected').html(); areaCode = c22; areaName = c2; cityCode = c1; cityName = c11; provinceCode = c0; provinceName = c00; }else{ //省-市 if(!confirm("只选择省市?")) { return; }else{ cityCode = c1; cityName = c11; provinceCode = c0; provinceName = c00; } } }else{ //省 if(!confirm("只选择省份?")) { return; }else{ provinceCode = c0; provinceName = c00; } } alert(provinceCode+":"+provinceName+";"+cityCode+":"+cityName+";"+areaCode+":"+areaName); } </script> </head> <body> <div class="panel admin-panel"> <div class="padding border-bottom" id="test1"> <input type="hidden" class="province" value="010000"/> <input type="hidden" class="city" value="010100"/> <input type="hidden" class="area" value="010101"/> <div id="province" name="province" type="selectbox"><div class="opts"></div></div> <div id="city" name="city" type="selectbox"><div class="opts"></div></div> <div id="area" name="area" type="selectbox"><div class="opts"></div></div> <a href="javascript:;" onclick="add()">当前选择的省市区</a> </div> </div> </body> </html>
demo下载地址:
