javascript - 动手写一个js 省市联动插件
本文介绍了javascript - 动手写一个js 省市联动插件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
移动端用的MUI的省市插件，但在PC上显示的太丑了。于是想动手做一个。大概是这个样子两个select框，点击省份可以选择市。 可以有省市可有默认值。数据有了求实现思路。
数据的模式如下图
var cityData3 = [{
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "北京市",
children: [{
value: "110101",
text: "东城区"
}, {
value: "110102",
text: "西城区"
}, {
value: "110103",
text: "崇文区"
}, {
value: "110104",
text: "宣武区"
}, {
value: "110105",
text: "朝阳区"
}, {
value: "110106",
text: "丰台区"
}, {
value: "110107",
text: "石景山区"
}, {
value: "110108",
text: "海淀区"
}, {
value: "110109",
text: "门头沟区"
}, {
value: "110111",
text: "房山区"
}, {
value: "110112",
text: "通州区"
}, {
value: "110113",
text: "顺义区"
}, {
value: "110114",
text: "昌平区"
}, {
value: "110115",
text: "大兴区"
}, {
value: "110116",
text: "怀柔区"
}, {
value: "110117",
text: "平谷区"
}, {
value: "110228",
text: "密云县"
}, {
value: "110229",
text: "延庆县"
}, {
value: "110230",
text: "其它区"
}]
}]}, {
value: '120000',
text: '天津市',
children: [{
value: "120100",
text: "天津市",
children: [{
value: "120101",
text: "和平区"
}, {
value: "120102",
text: "河东区"
}, {
value: "120103",
text: "河西区"
}, {
value: "120104",
text: "南开区"
}, {
value: "120105",
text: "河北区"
}, {
value: "120106",
text: "红桥区"
}, {
value: "120107",
text: "塘沽区"
}, {
value: "120108",
text: "汉沽区"
}, {
value: "120109",
text: "大港区"
}, {
value: "120110",
text: "东丽区"
}, {
value: "120111",
text: "西青区"
}, {
value: "120112",
text: "津南区"
}, {
value: "120113",
text: "北辰区"
}, {
value: "120114",
text: "武清区"
}, {
value: "120115",
text: "宝坻区"
}, {
value: "120116",
text: "滨海新区"
}, {
value: "120221",
text: "宁河县"
}, {
value: "120223",
text: "静海县"
}, {
value: "120225",
text: "蓟县"
}, {
value: "120226",
text: "其它区"
}]
}]},
------更新自己研究了一下已经把省弄出来了如何把市与省关联起来呢还有默认值怎么设置----
解决方案
你的模拟数据是有省市县三级数据的，所以，我加了一个县的层级，示例代码如下，直接把代码保存成文件即可查看联动效果：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
省：<select name="" id="province"></select>
市：<select name="" id="city"></select>
县：<select name="" id="county"></select>
<script>
var cityData3 = [{
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "北京市",
children: [{
value: "110101",
text: "东城区"
}, {
value: "110102",
text: "西城区"
}, {
value: "110103",
text: "崇文区"
}, {
value: "110104",
text: "宣武区"
}, {
value: "110105",
text: "朝阳区"
}, {
value: "110106",
text: "丰台区"
}, {
value: "110107",
text: "石景山区"
}, {
value: "110108",
text: "海淀区"
}, {
value: "110109",
text: "门头沟区"
}, {
value: "110111",
text: "房山区"
}, {
value: "110112",
text: "通州区"
}, {
value: "110113",
text: "顺义区"
}, {
value: "110114",
text: "昌平区"
}, {
value: "110115",
text: "大兴区"
}, {
value: "110116",
text: "怀柔区"
}, {
value: "110117",
text: "平谷区"
}, {
value: "110228",
text: "密云县"
}, {
value: "110229",
text: "延庆县"
}, {
value: "110230",
text: "其它区"
}]
}]
}, {
value: '120000',
text: '天津市',
children: [{
value: "120100",
text: "天津市",
children: [{
value: "120101",
text: "和平区"
}, {
value: "120102",
text: "河东区"
}, {
value: "120103",
text: "河西区"
}, {
value: "120104",
text: "南开区"
}, {
value: "120105",
text: "河北区"
}, {
value: "120106",
text: "红桥区"
}, {
value: "120107",
text: "塘沽区"
}, {
value: "120108",
text: "汉沽区"
}, {
value: "120109",
text: "大港区"
}, {
value: "120110",
text: "东丽区"
}, {
value: "120111",
text: "西青区"
}, {
value: "120112",
text: "津南区"
}, {
value: "120113",
text: "北辰区"
}, {
value: "120114",
text: "武清区"
}, {
value: "120115",
text: "宝坻区"
}, {
value: "120116",
text: "滨海新区"
}, {
value: "120221",
text: "宁河县"
}, {
value: "120223",
text: "静海县"
}, {
value: "120225",
text: "蓟县"
}, {
value: "120226",
text: "其它区"
}]
}]
}];
var provinceEle = document.getElementById('province');
var cityEle = document.getElementById('city');
var countyEle = document.getElementById('county');
var selectedProvince = {},
selectedCity = {};
function init() {
createSelectOptions(cityData3, provinceEle, function() {
createSelectOptions(cityData3[0].children, cityEle);
createSelectOptions(cityData3[0].children[0].children, countyEle);
});
provinceEle.addEventListener('change', function(e) {
var provinceValue = e.target.value;
selectedProvince = cityData3.filter(function(v) {
return v.value === provinceValue;
})[0];
selectedCity = selectedProvince.children[0];
createSelectOptions(selectedProvince.children, cityEle);
createSelectOptions(selectedCity.children, countyEle);
});
cityEle.addEventListener('change', function(e) {
var cityValue = e.target.value;
selectedCity = selectedProvince.children.filter(function(v) {
return v.value === cityValue;
})[0];
createSelectOptions(selectedCity.children, countyEle);
});
}
init();
function createSelectOptions(data, element, callback) {
var options = '';
data.forEach(function(v, i) {
options = options + '<option value=' + v.value + '>' + v.text + '</option>';
});
element.innerHTML = options;
if(typeof callback === 'function') callback();
}
</script>
</body>
</html>这篇关于javascript - 动手写一个js 省市联动插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
