前端基础----省市二级联动----js新手必会小案例

62 阅读 0 评论 41 点赞

我是靠谱客的博主震动战斗机，最近开发中收集的这篇文章主要介绍前端基础----省市二级联动----js新手必会小案例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

js面试题变成必考项目!省市二级联动,因为本人也是小白,var的名称没有用高端的英文,用a,b等代替,希望大佬们忽视. 考频非常高!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var a = new Array();
a[0]="辽宁";
a[1]="吉林";
var b = new Array();
b[0] = new Array();
b[1] = new Array ();
b[0][0] = "沈阳";
b[0][1] = "大连";
b[1][0] = "长春";
b[1][1] = "吉林";
function changeCity(){
var city = document.getElementById("city");
var province = document.getElementById("province");
city.options.length = 0;
var o
= province.options[province.selectedIndex].value;
for(var i = 0; i < b[o].length; i++){
var text = b[o][i];
city.options[city.options.length]=new Option (text,i);
}
}
</script>
</head>
<body>
<select name="province" id="province" onchange="changeCity()">
<option value="">请输入你的省份</option>
<script>
for(var i = 0 ; i<a.length ; i++
){
document.write("<option value='" + i + "'>" + a[i] + "</option>");
}
</script>
</select>
<select name="city" id="city">
<option >请选择城市</option>
</select>
</body>
</html>