省市区三级联动下拉框菜单javascript版_省市区三级联动下拉框资源-CSDN文库

11 浏览量 2020-10-23 19:09:53 上传评论收藏 378KB PDF 举报

在网页开发中，有时候我们需要实现一个功能，即用户在选择省份时，相关的城市和区域下拉框会自动更新，这就是所谓的“省市区三级联动下拉框菜单”。这个功能在填写地址、选择服务区域等场景中非常常见。本文将详细介绍如何使用JavaScript来实现这一功能。我们来看方法一。在这个方法中，我们使用了HTML的`<select>`元素来创建下拉菜单。三个下拉框分别代表省、市、区，它们的ID分别为`prov5`、`city5`和`area5`。每个下拉框都有一个`data-code`属性，用于存储对应的省、市、区的编码，方便后续处理。此外，还有隐藏字段`@Html.HiddenFor(m => m.Province)`、`@Html.HiddenFor(m => m.City)`和`@Html.HiddenFor(m => m.Area)`，用于保存用户选定的值。接下来是JavaScript部分，通过`CitySelect`对象来实现联动效果。这个对象需要数据（province、city、district的关联数据）、省份ID、城市ID和区域ID作为参数。`CitySelect`的实现可能涉及到对DOM的操作，以及监听用户在省市区下拉框中的选择变化，动态更新其他下拉框的选项。为了使这个功能正常工作，我们需要引入jQuery库（`jquery-1.4.4.min.js`）以及两个自定义的JavaScript文件：`city2.js`和`citySelect2.js`。这两个文件包含了实现联动逻辑的具体代码，如数据结构、事件处理等。然后是方法二，这个方法的实现稍微不同。HTML部分中，我们有三个独立的`<select>`元素，分别对应省、市、区。通过调用`region_init`函数初始化这些下拉框。这个函数接受六个参数，前三个是下拉框的ID，后三个可选参数用于设置默认值。如果未提供默认值，那么下拉框将显示各自列表的第一个值。`region_init`内部会根据提供的参数填充下拉框的选项，并处理联动逻辑。在`test.js`文件中，我们可以看到完整的`region_init`函数实现，包括处理省市区枚举数据的代码。枚举数据通常是一个对象或数组，包含了中国所有省份、城市和区县的信息，以便根据用户的选择动态生成下拉选项。实现省市区三级联动下拉框菜单的关键在于：一是准备好包含省市区关系的数据；二是编写JavaScript代码，监听用户在省级下拉框的选择，根据选择更新市级下拉框，然后再根据市级选择更新区级下拉框。确保所有必要的JavaScript库和自定义脚本被正确引入到页面中。这两种方法虽然具体实现细节有所不同，但核心思路是一致的，都是通过JavaScript动态更新下拉框的选项，以实现联动效果。

资源推荐

资源详情

资源评论

省市区三级联动下拉框菜单省市区三级联动下拉框菜单javascript版版

主要给大家介绍了javascript实现省市区三级联动下拉框菜单，有需要的朋友可以参考下

实现省市区三级下拉列表框，并且要实现联动效果。

方法一：方法一：

1.视图代码视图代码

</select>

</select>

</select>

@Html.HiddenFor(m => m.Province)

@Html.HiddenFor(m => m.City)

@Html.HiddenFor(m => m.Area)

2.JS调用调用

var selectVa2 = new CitySelect({

data: data,

provId: "#prov5",

cityId: '#city5',

areaId: '#area5',

isSelect: true

});

</script>

3.引入的引入的js

4.js插件下载地址插件下载地址

js插件下载地址：http://files.cnblogs.com/files/weishuanbao/%E7%9C%81%E5%B8%82%E5%8C%BA.rar

方法二：方法二：

实现效果根据选择省份，选择对应城市。

以下是HTML代码

<html>

<body>

</div>

</body>

</html>

region_init("select_province","select_city","select_area");

</script>

</body>

</html>

下面是js代码，代码比较长，主要是里面有一个完整的中国省市区的枚举参数。大家也可以使用的。主要来说要实现自定义默

认值的话，在调用我的region_init 方法的时候需要传递六个参数进去

复制代码代码如下:

var region_init = function(_region_p, _region_c, _region_d, _region_p_default, _region_c_default, _region_d_default){……}

前三个参数为三个下拉列表控件的ID，后三个参数可以不传值，如果不传值那么最后下拉列表的结果就是默认的每一个列表的

第一个值，如果要设置默认值的话那么就需要对应这三个参数传递相应的省市区的值。对应的省市区的值，在枚举类型里面对

应的有。如果还有不懂，或者枚举类型有什么问题的话，欢迎讨论吧。

以下是我的以下是我的test.js代码代码.

//省、市、区

var region_init = function (_region_p, _region_c, _region_d, _region_p_default, _region_c_default, _region_d_default) {

var region_p = document.getElementById(_region_p);

var region_c = document.getElementById(_region_c);

var region_d = document.getElementById(_region_d);

function option_items_select(cmb, value) {

for (var i = 0; i < cmb.options.length; i++) {

if (cmb.options[i].value == value) {

cmb.selectedIndex = i;

return;

}

//附加value、text

function option_items_add(cmb, value, text, obj, i) {

var option = document.createElement("OPTION");

cmb.options.add(option);

option.innerText = text;

option.value = value;

option.obj = obj;

}

function region_c_change() {

region_d.options.length = 0;

if (region_c.selectedIndex == -1)return;

var item = region_c.options[region_c.selectedIndex].obj;

for (var i = 0; i < item.district.length; i++) {

option_items_add(region_d, item.district[i].id, item.district[i].name, null, i);

}

option_items_select(region_d, _region_d_default);

}

function region_p_change() {

region_c.options.length = 0;

region_c.onchange = null;

if (region_p.selectedIndex == -1)return;

var item = region_p.options[region_p.selectedIndex].obj;

for (var i = 0; i < item.city.length; i++) {

option_items_add(region_c, item.city[i].id, item.city[i].name, item.city[i], i);

}

option_items_select(region_c, _region_c_default);

region_c_change();

region_c.onchange = region_c_change;

}

for (var i = 0; i < province_enum.length; i++) {

option_items_add(region_p, province_enum[i].id, province_enum[i].name, province_enum[i]);

}

option_items_select(region_p, _region_p_default);

region_p_change();

region_p.onchange = region_p_change;

}

var province_enum = [

{id: 1, name: '北京', city: [

{id: 1, name: '北京市', district: [

{id: 1, name: '东城区'},

{id: 2, name: '西城区'},

{id: 3, name: '崇文区'},

{id: 4, name: '宣武区'},

{id: 5, name: '朝阳区'},

{id: 6, name: '丰台区'},

{id: 7, name: '石景山区'},

{id: 8, name: '海淀区'},

{id: 9, name: '门头沟区'},

{id: 10, name: '房山区'},

{id: 11, name: '通州区'},

{id: 12, name: '顺义区'},

{id: 13, name: '昌平区'},

{id: 14, name: '大兴区'},

{id: 15, name: '怀柔区'},

{id: 16, name: '平谷区'},

{id: 17, name: '密云县'},

{id: 18, name: '延庆县'}

]}

]},

{id: 2, name: '天津', city: [

{id: 2, name: '天津市', district: [

{id: 19, name: '和平区'},

{id: 20, name: '河东区'},

{id: 21, name: '河西区'},

{id: 22, name: '南开区'},

{id: 23, name: '河北区'},

{id: 24, name: '红桥区'},

{id: 25, name: '塘沽区'},

{id: 26, name: '汉沽区'},

{id: 27, name: '大港区'},

{id: 28, name: '东丽区'},

{id: 29, name: '西青区'},

{id: 30, name: '津南区'},

{id: 31, name: '北辰区'},

{id: 32, name: '武清区'},

{id: 33, name: '宝坻区'},

{id: 34, name: '宁河县'},

{id: 35, name: '静海县'},

{id: 36, name: '蓟县'}

]}

]},

{id: 3, name: '河北', city: [

{id: 3, name: '石家庄市', district: [

{id: 37, name: '长安区'},

{id: 38, name: '桥东区'},

{id: 39, name: '桥西区'},

{id: 40, name: '新华区'},

{id: 41, name: '井陉矿区'},

{id: 42, name: '裕华区'},

{id: 43, name: '井陉县'},

{id: 44, name: '正定县'},

{id: 45, name: '栾城县'},

{id: 46, name: '行唐县'},

{id: 47, name: '灵寿县'},

{id: 48, name: '高邑县'},

{id: 49, name: '深泽县'},

{id: 50, name: '赞皇县'},

{id: 51, name: '无极县'},

{id: 52, name: '平山县'},

{id: 53, name: '元氏县'},

{id: 54, name: '赵县'},

{id: 55, name: '辛集市'},

{id: 56, name: '藁城市'},

{id: 57, name: '晋州市'},

{id: 58, name: '新乐市'},

{id: 59, name: '鹿泉市'}

]},

{id: 4, name: '唐山市', district: [

{id: 60, name: '路南区'},

{id: 61, name: '路北区'},

{id: 62, name: '古冶区'},

{id: 63, name: '开平区'},

{id: 64, name: '丰南区'},

{id: 65, name: '丰润区'},

{id: 66, name: '滦县'},

{id: 67, name: '滦南县'},

{id: 68, name: '乐亭县'},

{id: 69, name: '迁西县'},

{id: 70, name: '玉田县'},

{id: 71, name: '唐海县'},

{id: 72, name: '遵化市'},

{id: 73, name: '迁安市'}

]},

{id: 5, name: '秦皇岛市', district: [

{id: 74, name: '海港区'},

{id: 75, name: '山海关区'},

{id: 76, name: '北戴河区'},

{id: 77, name: '青龙满族自治县'},

{id: 78, name: '昌黎县'},

{id: 79, name: '抚宁县'},

{id: 80, name: '卢龙县'}

]},

{id: 6, name: '邯郸市', district: [

{id: 81, name: '邯山区'},

{id: 82, name: '丛台区'},

{id: 83, name: '复兴区'},

{id: 84, name: '峰峰矿区'},

{id: 85, name: '邯郸县'},

{id: 86, name: '临漳县'},

{id: 87, name: '成安县'},

{id: 88, name: '大名县'},

{id: 89, name: '涉县'},

{id: 90, name: '磁县'},

{id: 91, name: '肥乡县'},

{id: 92, name: '永年县'},

{id: 93, name: '邱县'},

{id: 94, name: '鸡泽县'},

{id: 95, name: '广平县'},

{id: 96, name: '馆陶县'},

{id: 97, name: '魏县'},

{id: 98, name: '曲周县'},

{id: 99, name: '武安市'}

]},

{id: 7, name: '邢台市', district: [

{id: 100, name: '桥东区'},

{id: 101, name: '桥西区'},

{id: 102, name: '邢台县'},

{id: 103, name: '临城县'},

{id: 104, name: '内丘县'},

{id: 105, name: '柏乡县'},

{id: 106, name: '隆尧县'},

{id: 107, name: '任县'},

{id: 108, name: '南和县'},

{id: 109, name: '宁晋县'},

{id: 110, name: '巨鹿县'},

{id: 111, name: '新河县'},

{id: 112, name: '广宗县'},

{id: 113, name: '平乡县'},

{id: 114, name: '威县'},

{id: 115, name: '清河县'},

{id: 116, name: '临西县'},

{id: 117, name: '南宫市'},

{id: 118, name: '沙河市'}

]},

{id: 8, name: '保定市', district: [

{id: 119, name: '新市区'},

{id: 120, name: '北市区'},

{id: 121, name: '南市区'},

{id: 122, name: '满城县'},

{id: 123, name: '清苑县'},

{id: 124, name: '涞水县'},

{id: 125, name: '阜平县'},

{id: 126, name: '徐水县'},

{id: 127, name: '定兴县'},

{id: 128, name: '唐县'},

{id: 129, name: '高阳县'},

{id: 130, name: '容城县'},

{id: 131, name: '涞源县'},

{id: 132, name: '望都县'},

{id: 133, name: '安新县'},

{id: 134, name: '易县'},

{id: 135, name: '曲阳县'},

{id: 136, name: '蠡县'},

{id: 137, name: '顺平县'},

{id: 138, name: '博野县'},

{id: 139, name: '雄县'},

{id: 140, name: '涿州市'},

{id: 141, name: '定州市'},

{id: 142, name: '安国市'},

{id: 143, name: '高碑店市'}

]},

{id: 9, name: '张家口市', district: [

{id: 144, name: '桥东区'},

{id: 145, name: '桥西区'},

{id: 146, name: '宣化区'},

{id: 147, name: '下花园区'},

{id: 148, name: '宣化县'},

{id: 149, name: '张北县'},

{id: 150, name: '康保县'},

{id: 151, name: '沽源县'},

{id: 152, name: '尚义县'},

{id: 153, name: '蔚县'},

{id: 154, name: '阳原县'},

{id: 155, name: '怀安县'},

{id: 156, name: '万全县'},

{id: 157, name: '怀来县'},

{id: 158, name: '涿鹿县'},

{id: 159, name: '赤城县'},

{id: 160, name: '崇礼县'}

]},

{id: 10, name: '承德市', district: [

{id: 161, name: '双桥区'},

{id: 162, name: '双滦区'},

{id: 163, name: '鹰手营子矿区'},

{id: 164, name: '承德县'},

{id: 165, name: '兴隆县'},

{id: 166, name: '平泉县'},

{id: 167, name: '滦平县'},

{id: 168, name: '隆化县'},

{id: 169, name: '丰宁满族自治县'},

{id: 170, name: '宽城满族自治县'},

{id: 171, name: '围场满族蒙古族自治县'}

]},

{id: 11, name: '沧州市', district: [

{id: 172, name: '新华区'},

{id: 173, name: '运河区'},

{id: 174, name: '沧县'},

{id: 175, name: '青县'},

{id: 176, name: '东光县'},

{id: 177, name: '海兴县'},

{id: 178, name: '盐山县'},

{id: 179, name: '肃宁县'},

{id: 180, name: '南皮县'},

{id: 181, name: '吴桥县'},

{id: 182, name: '献县'},

{id: 183, name: '孟村回族自治县'},

{id: 184, name: '泊头市'},

{id: 185, name: '任丘市'},

{id: 186, name: '黄骅市'},

{id: 187, name: '河间市'}

]},

{id: 12, name: '廊坊市', district: [

{id: 188, name: '安次区'},

{id: 189, name: '广阳区'},

{id: 190, name: '固安县'},

{id: 191, name: '永清县'},

{id: 192, name: '香河县'},

{id: 193, name: '大城县'},

{id: 194, name: '文安县'},

{id: 195, name: '大厂回族自治县'},

{id: 196, name: '霸州市'},

{id: 197, name: '三河市'}

]},

{id: 13, name: '衡水市', district: [

{id: 198, name: '桃城区'},

{id: 199, name: '枣强县'},

{id: 200, name: '武邑县'},

{id: 201, name: '武强县'},

{id: 202, name: '饶阳县'},

{id: 203, name: '安平县'},

{id: 204, name: '故城县'},

{id: 205, name: '景县'},

{id: 206, name: '阜城县'},

{id: 207, name: '冀州市'},

{id: 208, name: '深州市'}

]}

]},

{id: 4, name: '山西', city: [

{id: 14, name: '太原市', district: [

{id: 209, name: '小店区'},

{id: 210, name: '迎泽区'},

{id: 211, name: '杏花岭区'},

{id: 212, name: '尖草坪区'},

{id: 213, name: '万柏林区'},

{id: 214, name: '晋源区'},

{id: 215, name: '清徐县'},

{id: 216, name: '阳曲县'},

{id: 217, name: '娄烦县'},

{id: 218, name: '古交市'}

]},

{id: 15, name: '大同市', district: [

{id: 219, name: '城区'},

{id: 220, name: '矿区'},

{id: 221, name: '南郊区'},

{id: 222, name: '新荣区'},

{id: 223, name: '阳高县'},

{id: 224, name: '天镇县'},

{id: 225, name: '广灵县'},

剩余46页未读，继续阅读

评论收藏

内容反馈

weixin_38720009

粉丝: 4
资源: 866

省市区三级联动下拉框菜单javascript版

全国省市二级联动下拉菜单 js版

javascript实现省市区三级联动下拉框菜单

省市区三级联动菜单

省市三级下拉框联动菜单

AJAX省市区三级联动下拉菜单(java版)

javascript省市区三级联动下拉框菜单实例演示

国家省市三级联动下拉菜单 js

省市联动下拉框JavaScript代码

layui-省市县三级联动下拉框-HTML源码

jQuery省市区三级联动下拉框.zip

layui-省市县三级联动下拉框效果.rar

省市县三级联动下拉框

Select2实现全国省市区三级联动下拉菜单

AJAX版省市区三级联动下拉框

jQuery省市区三级联动下拉框

省、市、县三级联动下拉框

省市区三级联动下拉菜单JS文件下载

js 实现省市区三级联动菜单效果

纯JS省市区三级联动,全国省市区用js实现三级下拉,直接引用js即可,后续更新版

实现全国省市区三级联动下拉菜单

c# winfrom 省市区三级联动

世界主要国家地区的JS三级联动(包括国内的省市区三级联动）

最新资源