如何用js实现省市区之间的三级联动

2024-05-05 10:43

1. 如何用js实现省市区之间的三级联动

　　页面中获取值并判断的js如下：
　　
//这个函数是必须的，因为在area.js里每次更改地址时会调用此函数
function promptinfo()
{
    var address = document.getElementById('address');
    var s1 = document.getElementById('s1');
    var s2 = document.getElementById('s2');
    var town1 = document.getElementById('town1');

如何用js实现省市区之间的三级联动

2. 网站开发中怎么实现省市区三级联动

省市区三级联动代码

3. 如何实现select省市地区三级联动并回显

首先导入三个js文件（注：最后）

显示：


省市区街道:






拼接成:xx省-xx市-xx区的格式保存在后台，这里我保存的是对应的value值

function submitForm(){
var sheng="";
var shi="";
var qu="";
sheng=document.getElementById("province1").value; 
shi=document.getElementById("city1").value;
qu=document.getElementById("district1").value;
$("#location").val(sheng+"-"+shi+"-"+qu);
$('#dlg_form').submit();
}


回显：我这个回显是在编辑时，$(#).trigger();方法是根据当前操作的下拉框是省或是市来初始化之后的下拉列表框，比如我先选择了省，则市和区就会被初始化

var str=node.location;
var strs = new Array();
strs=str.split("-");
$('#province1').val(strs[0]);
$('#province1').trigger("change");
$('#city1').val(strs[1]);
$('#city1').trigger("change");
$('#district1').val(strs[2]);




distpicker.data.js

(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as anonymous module.
define('ChineseDistricts', [], factory);
} else {
// Browser globals.
factory();
}
})(function () {


var ChineseDistricts = {
86: {
110000: '北京市',
120000: '天津市',
130000: '河北省',
140000: '山西省',
150000: '内蒙古自治区',
210000: '辽宁省',
220000: '吉林省',
230000: '黑龙江省',
310000: '上海市',
320000: '江苏省',
330000: '浙江省',
340000: '安徽省',
350000: '福建省',
360000: '江西省',
370000: '山东省',
410000: '河南省',
420000: '湖北省',
430000: '湖南省',
440000: '广东省',
450000: '广西壮族自治区',
460000: '海南省',
500000: '重庆市',
510000: '四川省',
520000: '贵州省',
530000: '云南省',
540000: '西藏自治区',
610000: '陕西省',
620000: '甘肃省',
630000: '青海省',
640000: '宁夏回族自治区',
650000: '新疆维吾尔自治区',
710000: '台湾省',
810000: '香港特别行政区',
820000: '澳门特别行政区'
},
110000: {
110100: '北京市市辖区'
},
110100: {
110101: '东城区',
·
·
·
},
820000: {
820001: '花地玛堂区',
820002: '花王堂区',
820003: '望德堂区',
820004: '大堂区',
820005: '风顺堂区',
820006: '嘉模堂区',
820007: '路凼填海区',
820008: '圣方济各堂区'
}
};


if (typeof window !== 'undefined') {
window.ChineseDistricts = ChineseDistricts;
}


return ChineseDistricts;


});

distpicker.js



(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as anonymous module.
define(['jQuery', 'ChineseDistricts'], factory);
} else if (typeof exports === 'object') {
// Node / CommonJS
factory(require('jquery'), require('ChineseDistricts'));
} else {
// Browser globals.
factory(jQuery, ChineseDistricts);
}
})(function ($, ChineseDistricts) {


'use strict';


if (typeof ChineseDistricts === 'undefined') {
throw new Error('The file "distpicker.data.js" must be included first!');
}


var NAMESPACE = 'distpicker';
var EVENT_CHANGE = 'change.' + NAMESPACE;
var PROVINCE = 'province';
var CIRY = 'city';
var DISTRICT = 'district';


function Distpicker(element, options) {
this.$element = $(element);
this.options = $.extend({}, Distpicker.DEFAULTS, $.isPlainObject(options) && options);
this.placeholders = $.extend({}, Distpicker.DEFAULTS);
this.active = false;
this.init();
}


Distpicker.prototype = {
constructor: Distpicker,


init: function () {
var options = this.options;
var $select = this.$element.find('select');
var length = $select.length;
var data = {};


$select.each(function () {
$.extend(data, $(this).data());
});


$.each([PROVINCE, CIRY, DISTRICT], $.proxy(function (i, type) {
if (data[type]) {
options[type] = data[type];
this['$' + type] = $select.filter('[data-' + type + ']');
} else {
this['$' + type] = length > i ? $select.eq(i) : null;
}
}, this));


this.bind();


// Reset all the selects (after event binding)
this.reset();


this.active = true;
},


bind: function () {
if (this.$province) {
this.$province.on(EVENT_CHANGE, (this._changeProvince = $.proxy(function () {
this.output(CIRY);
this.output(DISTRICT);
}, this)));
}


if (this.$city) {
this.$city.on(EVENT_CHANGE, (this._changeCity = $.proxy(function () {
this.output(DISTRICT);
}, this)));
}
},


unbind: function () {
if (this.$province) {
this.$province.off(EVENT_CHANGE, this._changeProvince);
}


if (this.$city) {
this.$city.off(EVENT_CHANGE, this._changeCity);
}
},


output: function (type) {
var options = this.options;
var placeholders = this.placeholders;
var $select = this['$' + type];
var districts = {};
var data = [];
var code;
var matched;
var value;


if (!$select || !$select.length) {
return;
}


value = options[type];


code = (
type === PROVINCE ? 86 :
type === CIRY ? this.$province && this.$province.find(':selected').data('code') :
type === DISTRICT ? this.$city && this.$city.find(':selected').data('code') : code
);


districts = $.isNumeric(code) ? ChineseDistricts[code] : null;


if ($.isPlainObject(districts)) {
$.each(districts, function (code, address) {
var selected = address === value;


if (selected) {
matched = true;
}


data.push({
code: code,
address: address,
selected: selected
});
});
}


if (!matched) {
if (data.length && (options.autoSelect || options.autoselect)) {
data[0].selected = true;
}


// Save the unmatched value as a placeholder at the first output
if (!this.active && value) {
placeholders[type] = value;
}
}


// Add placeholder option
if (options.placeholder) {
data.unshift({
code: '',
address: placeholders[type],
selected: false
});
}


$select.html(this.getList(data));
},


getList: function (data) {
var list = [];


$.each(data, function (i, n) {
list.push(
'<option' +
' value="' + (n.address && n.code ? n.address : '') + '"' +
' data-code="' + (n.code || '') + '"' +
(n.selected ? ' selected' : '') +
'>' +
(n.address || '') +
''
);
});


return list.join('');
},


reset: function (deep) {
if (!deep) {
this.output(PROVINCE);
this.output(CIRY);
this.output(DISTRICT);
} else if (this.$province) {
this.$province.find(':first').prop('selected', true).trigger(EVENT_CHANGE);
}
},


destroy: function () {
this.unbind();
this.$element.removeData(NAMESPACE);
}
};


Distpicker.DEFAULTS = {
autoSelect: true,
placeholder: true,
province: '—— 省 ——',
city: '—— 市 ——',
district: '—— 区 ——'
};


Distpicker.setDefaults = function (options) {
$.extend(Distpicker.DEFAULTS, options);
};


// Save the other distpicker
Distpicker.other = $.fn.distpicker;


// Register as jQuery plugin
$.fn.distpicker = function (option) {
var args = [].slice.call(arguments, 1);


return this.each(function () {
var $this = $(this);
var data = $this.data(NAMESPACE);
var options;
var fn;


if (!data) {
if (/destroy/.test(option)) {
return;
}


options = $.extend({}, $this.data(), $.isPlainObject(option) && option);
$this.data(NAMESPACE, (data = new Distpicker(this, options)));
}


if (typeof option === 'string' && $.isFunction(fn = data[option])) {
fn.apply(data, args);
}
});
};


$.fn.distpicker.Constructor = Distpicker;
$.fn.distpicker.setDefaults = Distpicker.setDefaults;


// No conflict
$.fn.distpicker.noConflict = function () {
$.fn.distpicker = Distpicker.other;
return this;
};


$(function () {
$('[data-toggle="distpicker"]').distpicker();
});
});


main.js

$(function () {


'use strict';


var $distpicker = $('#distpicker');


$distpicker.distpicker({
province: '福建省',
city: '厦门市',
district: '思明区'
});
$('#reset').click(function () {
$distpicker.distpicker('reset');
});


$('#reset-deep').click(function () {
$distpicker.distpicker('reset', true);
});


$('#destroy').click(function () {
$distpicker.distpicker('destroy');
});


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


$('#distpicker2').distpicker({
province: '---- 所在省 ----',
city: '---- 所在市 ----',
district: '---- 所在区 ----'
});


$('#distpicker3').distpicker({
province: '浙江省',
city: '杭州市',
district: '西湖区'
});


$('#distpicker4').distpicker({
placeholder: false
});


$('#distpicker5').distpicker({
autoSelect: false
});


});

如何实现select省市地区三级联动并回显

4. js写的省市县三级联动怎么实现增删改查

省市县三级联动菜单，JS全国省市县(区)联动代码，一般可以用于用户注册或分类信息二手交易网站，需要的朋友直接复制代码就可以用了，不过有朋友反馈说缺少某些城市，具体缺少哪个尚不知，请想用的朋友自己补全吧，省市、县级联菜单，分享给大家。

5. 用c#怎样实现省市县三级联动

用ajax嘛，省市县都保存到数据里面便于维护。

用c#怎样实现省市县三级联动

6. 如何用jsp或ssh架构实现省市区三级联动

需要结合Ajax的技术处理。

7. jquery mobile怎样实现省市区三级联动，能发个例子过来吗？

亲，这个要通过ajax到数据库的读取数据你会数据库吗？不会的，只是要这二个三级联动的话可以用js写死这些省市区

jquery mobile怎样实现省市区三级联动，能发个例子过来吗？

8. 添加省市区三级联动程序复杂吗？

一点都不麻烦，excel都能轻松搞定
最新文章
热门文章
推荐阅读