省市区三级联动（数组、JSON实现）
省市区联动下拉效果在WEB中应⽤⾮常⼴泛，尤其在⼀些会员信息系统、电商⽹站最为常见。
下⾯举例⼀种实现⽅式：
htlm代码：
<form>
<select id="proSelect">
<option>选择省</option>
</select>
<select id="citySelect">
<option>选择市</option>
</select>
<select id="areaSelect">
<option>选择区</option>
</select>
</form>
js代码：
var ElementById("proSelect");
var ElementById("citySelect");
var ElementById("areaSelect");
pro.addEventListener("change",addCity);
//将指定的添加到该对象上当pro触发change事件时 addCity()就会被执⾏。
city.addEventListener("change",addArea);
pro.add(new Option("陕西省","陕西省"));
//创建⼀个option对象 new Option(text, value) 并添加到<seletc>中
pro.add(new Option("⼭东省","⼭东省"));
function addCity(){
var choiceVal=pro.value;
city.options.length=1;
//options是个数组⾥⾯存放着多个<option>标签此处长度为1是为了保留默认的<option>
area.options.length=1;
if(choiceVal=="陕西省"){
city.add(new Option("西安市","西安市"));
city.add(new Option("渭南市","渭南市"));
}
else if (choiceVal=="⼭东省"){
city.add(new Option("济南市","济南市"));
city.add(new Option("济宁市","济宁市"));
}
}
function addArea(){
var choiceVal=city.value;
if(choiceVal=="西安市"){
area.add(new Option("未央区","未央区"));
area.add(new Option("碑林区","碑林区"));
}
else if (choiceVal=="渭南市"){
area.add(new Option("临渭区","临渭区"));
area.add(new Option("华州区","华州区"));
}
else if (choiceVal=="济南市"){
area.add(new Option("市中区","市中区"));
area.add(new Option("历城区","历城区"));
}
else if (choiceVal=="济宁市"){
area.add(new Option("任城区","任城区"));
area.add(new Option("兖州区","兖州区"));
}
}
这样虽然实现了省级联动的效果，但是如果省市较多，添加进去⼗分⿇烦，也很不清晰。因此我们不建议使⽤这样的⽅法实现。
⼀般的我们经常看到的关于级联样式的数据处理，例如省级联动，三级菜单等，⼀般这些数据是在数据库中存储的每⼀条数据的格式是：ID-Name-Pid
现在我们不需要数据库，但是我们的数据不管是在数组还是在JSON的对象，我们的数据存储也要是这中形式。
数组格式举例：
var arrs=new Array();
//          id    name  pid
arrs[0]=['1','陕西','0'];
arrs[1]=['2','⼭东','0'];
arrs[2]=['3','西安','1'];
arrs[3]=['4','渭南','1'];
arrs[4]=['5','青岛','2'];
arrs[5]=['6','潍坊','2'];
arrs[6]=['7','富平','4'];
这样的数据格式特点是：省份的⽗ID（pid）都是0，因为它是最⾼⼀级；城市的⽗ID对应的是它的上⼀级省份的ID；地区的⽗id对应的是它的上⼀级城市的ID；这样就形成⼀个清晰的关系链。
举例：[‘1’,‘陕西’,‘0’];
[‘4’,‘渭南’,‘1’];
[‘7’,‘富平’,‘4’];
然后我们想：我们需要所有的省份的时候，我们只要遍历这个数组，把所有⽗ID为0的数据显⽰即可，接着我们每选择⼀个省份或者⼀个城市的时候，我们只要创建⼀个函数即可；这个函数传⼊的参数是当前省份或者城市的ID，出所有对应的⽗ID等于当前这个参数id的所有数据，显⽰即可。
第⼆种⽅式 数组实现
js代码：
var arrs=new Array();
//  id  name    pid
arrs[0]=['1','陕西省','0'];
arrs[1]=['2','⼭东省','0'];
arrs[2]=['3','西安市','1'];
arrs[3]=['4','渭南市','1'];
arrs[4]=['5','济南市','2'];
arrs[5]=['6','济宁市','2'];
arrs[6]=['7','未央区','3'];
arrs[7]=['8','碑林区','3'];
arrs[8]=['9','临渭区','4'];
arrs[9]=['10','华州区','4'];
arrs[10]=['11','市中区','5'];
arrs[11]=['12','历城区','5'];
arrs[12]=['13','任城区','6'];
arrs[13]=['14','兖州区','6'];
//添加省份
for(i in arrs){
if(arrs[i][2]=='0'){
pro.add(new Option(arrs[i][1],arrs[i][0]));
}
}
function addCity(event){
var value=event.target.value;
json转换对象/*event 对象代表事件的状态⽐如事件在其中发⽣的元素键盘按键的状态⿏标的位置⿏标按钮的状态。target 事件属性可返回触发该事件的节点如⽣成事件的元素、⽂档或窗⼝。*/
city.options.length=1;
area.options.length=1;
//添加城市
for(i in arrs){
if(arrs[i][2]==value){
city.add(new Option(arrs[i][1],arrs[i][0]));
}
}
}
function addArea(event){
var value=event.target.value;
area.options.length=1;
//添加区、县
for(i in arrs){
if(arrs[i][2]==value){
area.add(new Option(arrs[i][1],arrs[i][0]));
}
}
}
看，这种⽅式是不是⽐第⼀种更清晰呢？在实现我们想要的效果的同时，代码可读性也较好。
上⾯提到，还可以⽤JSON来实现。那么，我们来了解⼀下JSON。
在 JS 语⾔中，⼀切都是对象。因此，任何⽀持的类型都可以通过 JSON 来表⽰，例如字符串、数字、对象、数组等。但是对象和数组是⽐较特殊且常⽤的两种类型。
JSON 键/值对:
JSON 键值对是⽤来保存 JS 对象的⼀种⽅式，和 JS 对象的写法也⼤同⼩异，键/值对组合中的键名写在前⾯并⽤双引号 “” 包裹，使⽤冒号 : 分隔，然后紧接着值：
{"firstName": "John"}
这很容易理解，等价于这条 JavaScript 语句：
{firstName = "John"}
这个⽰例⾮常简单，但是，当将多个键/值对串在⼀起时，JSON 就会体现出它的价值了。⾸先，可以创建包含多个键/值对的 记录，⽐如：
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }
JSON 与 JS 对象的关系:
JSON 是 JS 对象的字符串表⽰法，它使⽤⽂本表⽰⼀个 JS 对象的信息，本质是⼀个字符串。
如：
var obj = {a: 'Hello', b: 'World'};
//这是⼀个对象，注意键名也是可以使⽤引号包裹的
var json = '{"a": "Hello", "b": "World"}';
//这是⼀个 JSON 字符串，本质是⼀个字符串
要实现从对象转换为 JSON 字符串，使⽤ JSON.stringify() ⽅法，要实现从 JSON 转换为对象，使⽤ JSON.parse() ⽅法。了解了JSON后，我们来看⽤JSON实现省级联动的⽅法。
js代码：
var con='['+
'{"id":"1","name":"陕西省","pid":"0"},'
+'{"id":"2","name":"⼭东省","pid":"0"},'
+'{"id":"3","name":"西安市","pid":"1"},'
+'{"id":"4","name":"渭南市","pid":"1"},'
+'{"id":"5","name":"济南市","pid":"2"},'
+'{"id":"6","name":"济宁市","pid":"2"},'
+'{"id":"7","name":"未央区","pid":"3"},'
+'{"id":"8","name":"碑林区","pid":"3"},'
+'{"id":"9","name":"临渭区","pid":"4"},'
+'{"id":"10","name":"华州区","pid":"4"},'
+'{"id":"11","name":"市中区","pid":"5"},'
+'{"id":"12","name":"历城区","pid":"5"},'
+'{"id":"13","name":"任城区","pid":"6"},'
+'{"id":"14","name":"兖州区","pid":"6"}'
+']';
var obj=JSON.parse(con);
//从 JSON 转换为对象
for(i in obj){
if(obj[i].pid=='0'){
pro.add(new Option(obj[i].name,obj[i].id));
}
}
function addCity(event){
var value=event.target.value;
city.options.length=1;
area.options.length=1;
for(i in obj){
if(obj[i].pid==value){
city.add(new Option(obj[i].name,obj[i].id));
}
}
}
function addArea(event){
var value=event.target.value;
area.options.length=1;
for(i in obj){
if(obj[i].pid==value){
area.add(new Option(obj[i].name,obj[i].id));
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。