今天看啥
热点:
省市区三级联动在填写表单等有关地址时显得尤为重要,直接提高了用户的填写速度与准确度,同时也方便网站数据库统一管理,接下来本文使用js代码实现省市区三级联动的代码,感兴趣的你可以参考下希望可以帮助到你。文章的最后帮客之家还整理了一个从QQ直接调用的方法,方便大家直接调用QQ的省市区数据。

 

纯JS的全国地区省市区三级联动

 

一个纯JS的全国地区省市区三级联动例子

一个纯JS的全国地区三级联动例子

 

一个纯JS的全国地区三级联动例子

 

一个纯JS的全国地区三级联动例子

 

代码附件:http://pan.baidu.com/s/1msFoB

 

纯JS的全国地区省市区三级联动例子二

不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动。

当省市区数据变动是只需调正js即可。

使用方法:

<!DOCTYPE html>
<html>
<head>
<title>纯JS省市区联动</title>
<script type="text/javascript" src="jsAddress.js"></script>
</head>
<body>
<div>
省:<select id="cmbProvince"></select>
市:<select id="cmbCity"></select>
区:<select id="cmbArea"></select>
<br /><br />
省:<select id="Select1"></select>
市:<select id="Select2"></select>
区:<select id="Select3"></select>
<script type="text/javascript">
addressInit('cmbProvince', 'cmbCity', 'cmbArea', '陕西', '宝鸡市', '金台区');
addressInit('Select1', 'Select2', 'Select3');
</script>
</div>
</body>
</html>

核心代码如下:

?
var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, defaultProvince, defaultCity, defaultArea)
{
var cmbProvince = document.getElementById(_cmbProvince);
var cmbCity = document.getElementById(_cmbCity);
var cmbArea = document.getElementById(_cmbArea);
 
function cmbSelect(cmb, str)
{
for(var i=0; i<cmb.options.length; i++)
{
if(cmb.options[i].value == str)
{
cmb.selectedIndex = i;
return;
}
}
}
function cmbAddOption(cmb, str, obj)
{
var option = document.createElement("OPTION");
cmb.options.add(option);
option.innerHTML = str;
option.value = str;
option.obj = obj;
}
 
function changeCity()
{
cmbArea.options.length = 0;
if(cmbCity.selectedIndex == -1)return;
var item = cmbCity.options[cmbCity.selectedIndex].obj;
for(var i=0; i<item.areaList.length; i++)
{
cmbAddOption(cmbArea, item.areaList[i], null);
}
cmbSelect(cmbArea, defaultArea);
}
function changeProvince()
{
cmbCity.options.length = 0;
cmbCity.onchange = null;
if(cmbProvince.selectedIndex == -1)return;
var item = cmbProvince.options[cmbProvince.selectedIndex].obj;
for(var i=0; i<item.cityList.length; i++)
{
cmbAddOption(cmbCity, item.cityList[i].name, item.cityList[i]);
}
cmbSelect(cmbCity, defaultCity);
changeCity();
cmbCity.onchange = changeCity;
}
 
for(var i=0; i<provinceList.length; i++)
{
cmbAddOption(cmbProvince, provinceList[i].name, provinceList[i]);
}
cmbSelect(cmbProvince, defaultProvince);
changeProvince();
cmbProvince.onchange = changeProvince;
}
 
var provinceList = [
{name:'北京', cityList:[
{name:'市辖区', areaList:['东城区','西城区','崇文区','宣武区','朝阳区','丰台区','石景山区','海淀区','门头沟区','房山区','通州区','顺义区','昌平区','大兴区','怀柔区','平谷区']},
{name:'县', areaList:['密云县','延庆县']}
]},
{name:'上海', cityList:[
{name:'市辖区', areaList:['黄浦区','卢湾区','徐汇区','长宁区','静安区','普陀区','闸北区','虹口区','杨浦区','闵行区','宝山区','金山区','松江区','青浦区','南汇区','奉贤区']},
{name:'县', areaList:['崇明县']}
]}
];
 
 

从QQ网站中提取的纯JS省市区三级联动

 
发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动。所以研究了一下。他的界面如下:

何不直接使用的数据呢?

惊喜的是QQ是使用引用外部JS来实现三级联动的。JS如下:http://ip.qq.com/js/geo.js

使用方法如下:

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>QQ JS省市区三级联动</title>
<!-- 直接使用QQ的省市区数据 -->
<!--
<script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script>
-->
<script type="text/javascript" src="geo.js"></script>
</head>
<body onload="setup();preselect('陕西省');promptinfo();">
        <form>
            <select class="select" name="province" id="s1">
              <option></option>
            </select>
            <select class="select" name="city" id="s2">
              <option></option>
            </select>
            <select class="select" name="town" id="s3">
              <option></option>
            </select>
            <input id="address" name="address" type="hidden" value="" />
          <input onclick="alert(document.getElementById('address').value); return false;" type="submit" value="提交" />
        </form>
<script>

//这个函数是必须的,因为在geo.js里每次更改地址时会调用此函数
function promptinfo()
{
   
var address = document.getElementById('address');
   
var s1 = document.getElementById('s1');
   
var s2 = document.getElementById('s2');
   
var s3 = document.getElementById('s3');
    address.value
= s1.value + s2.value + s3.value;
}


</script>
</body>
</html>

 

实例下载:http://pan.baidu.com/s/1ioTmH

评论暂时关闭