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:[‘崇明县‘]}

]}

];

实例下载:http://files.cnblogs.com/files/weihengblogs/jsAddress.rar

时间: 2024-10-13 21:59:09

JS省市区三级联动的相关文章

QQ JS省市区三级联动

如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script> --> <

【修改】纯JS省市区三级联动 支持js默认省市区

---恢复内容开始--- <!DOCTYPE html><html><head><title>修改,QQ JS省市区三级联动 -支持默认省市区</title><!-- 使用QQ的省市区数据 --><!--<script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script>--><

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

http://www.cnblogs.com/zjfree/p/3269864.html 今天收到园友信息,想问我要原来写的一个 < 纯JS省市区三级联动 >文章中最新的省市区数据. 那个是老早以前搞的.记得数据是从数据库中提取生成的.一时也找不到当时的数据库了. 我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下: 何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com

JS 省市区三级联动

JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

PHP+Ajax+JS省市区三级联动

     基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句.  index.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

jsp+js省市区三级联动

<select id="province"> <option value="-1">请选择</option> </select>> <select id="city"></select>> <select id="town"></select>> <script> var provinceArr = [

省市区三级联动 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"></scri

省市区三级联动(二)JS部分简单版

通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的函数 $("#sjld").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html>    <head>        <meta c