html选择地址的插件,jQuery中国省市区城市选择三级联动插件

特效描述：省市区选择 三级联动插件。兼容IE6 jQuery中国省市区地址三级联动插件

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

中国省市区地址三级联动jQuery插件 A simple jQuery plugin for picking provinces, cities and districts of China

Basic

HTML:

<div data-toggle="distpicker">

<select></select>

<select></select>

<select></select>

</div>

Demo:

Province

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区

City

—— 市 ——北京市市辖区

District

—— 区 ——东城区西城区朝阳区丰台区石景山区海淀区门头沟区房山区通州区顺义区昌平区大兴区怀柔区平谷区密云区延庆区

Custom placeholders

HTML:

<div data-toggle="distpicker">

<select data-province="---- 选择省 ----"></select>

<select data-city="---- 选择市 ----"></select>

<select data-district="---- 选择区 ----"></select>

</div>

Demo:

Province

---- 选择省 ----北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区

City

---- 选择市 ----北京市市辖区

District

---- 选择区 ----东城区西城区朝阳区丰台区石景山区海淀区门头沟区房山区通州区顺义区昌平区大兴区怀柔区平谷区密云区延庆区

Custom districts

HTML:

<div data-toggle="distpicker">

<select data-province="浙江省"></select>

<select data-city="杭州市"></select>

<select data-district="西湖区"></select>

</div>

Demo:

Province

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区

City

—— 市 ——杭州市宁波市温州市嘉兴市湖州市绍兴市金华市衢州市舟山市台州市丽水市

District

—— 区 ——上城区下城区江干区拱墅区西湖区滨江区萧山区余杭区富阳区桐庐县淳安县建德市临安市

The districts must be existed in the distpicker.data.js file!

Initialize with $.fn.distpicker method

Basic

HTML:

<div id="distpicker1">

<select></select>

<select></select>

<select></select>

</div>

JavaScript:

$("#distpicker1").distpicker();

Demo:

Province

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区

City

—— 市 ——北京市市辖区

District

—— 区 ——东城区西城区朝阳区丰台区石景山区海淀区门头沟区房山区通州区顺义区昌平区大兴区怀柔区平谷区密云区延庆区

Custom placeholders

HTML:

<div id="distpicker2">

<select></select>

<select></select>

<select></select>

</div>

JavaScript:

$("#distpicker2").distpicker({

province: "---- 所在省 ----",

city: "---- 所在市 ----",

district: "---- 所在区 ----"

});

Demo:

Province

---- 所在省 ----北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区

City

---- 所在市 ----北京市市辖区

District

---- 所在区 ----东城区西城区朝阳区丰台区石景山区海淀区门头沟区房山区通州区顺义区昌平区大兴区怀柔区平谷区密云区延庆区

Custom districts

HTML:

<div id="distpicker3">

<select></select>

<select></select>

<select></select>

</div>

JavaScript:

$("#distpicker3").distpicker({

province: "浙江省",

city: "杭州市",

district: "西湖区"

});

Demo:

Province

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区

City

—— 市 ——杭州市宁波市温州市嘉兴市湖州市绍兴市金华市衢州市舟山市台州市丽水市

District

—— 区 ——上城区下城区江干区拱墅区西湖区滨江区萧山区余杭区富阳区桐庐县淳安县建德市临安市

The districts must be existed in the distpicker.data.js file!

Methods

Province

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区

City

—— 市 ——福州市厦门市莆田市三明市泉州市漳州市南平市龙岩市宁德市

District

—— 区 ——思明区海沧区湖里区集美区同安区翔安区

Reset

Reset (deep)

Destroy

More examples

Only province and city

HTML:

<div data-toggle="distpicker">

<select></select>

<select></select>

</div>

Demo:

Province

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区

City

—— 市 ——北京市市辖区

Only province

HTML:

<div data-toggle="distpicker">

<select></select>

</div>

Demo:

Province

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区

Without placeholders

JavaScript:

$("#distpicker4").distpicker({

placeholder: false

});

Demo:

Province

北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区

City

北京市市辖区

District

东城区西城区朝阳区丰台区石景山区海淀区门头沟区房山区通州区顺义区昌平区大兴区怀柔区平谷区密云区延庆区

Without automatic selection

JavaScript:

$("#distpicker5").distpicker({

autoSelect: false

});

Demo:

Province

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区

City

—— 市 ——

District

—— 区 ——