总体思路
省市二级下拉框联动包括省份下拉框和市级下拉框。我们需要做的是加载出相应省份选项，并且点击一省份时市级下拉框显示该省份下的市，简单来说就是数组的存储与跳转。
效果图展示
具体思路
省份下拉框
1.定义存放所有省份数据的数组，可任意加想要的省份
var provinceList =["==请选择==","北京市","江西省","湖北省"];
2.定义加载省份下拉框的方法，具体思路放在代码里。
//定义加载省份下拉框的方法loadProvince
function loadProvince(){
//遍历provinceList数组中的元素
//动态增加选项option到下拉框sltProvince中
//1.1获得省份下拉框对象
var sltProvince = document.getElementById("sltProvince");
//1.2设置省份下拉框下拉选项的个数
sltProvince.length = provinceList.length;
//1.3遍历provinceList数组
for(var i=0;i<provinceList.length;i++){
//设置下拉框选项显示的内容
sltProvince.options[i].text= provinceList[i];
}
}市级下拉框
定义存放所有市数据的二维数组（二维数组的作用是需要与省份联动），数组内的数据根据省份数组添加。
var cityList=[
["==请选择=="],
["东城区","西城区","朝阳区"],
["南昌市","九江市","上饶市"],
["武汉市","荆州市"],
];
联动
定义根据当前选择的省份，加载对应市下拉框数据的方法（下列代码每个步骤都有说明）。
function loadCity(){
//1.获得所选择的省份选项序号
var idx = document.getElementById("sltProvince").selectedIndex;
//2.从cityList数组中，取idx行所在的数据
var cityData = cityList[idx];
//3.遍历cityData中的数据，载入到市下拉框sltCity中
var sltCity = document.getElementById("sltCity");
sltCity.length = cityData.length;
for(var i=0;i<cityData.length;i++){
sltCity.options[i].text = cityData[i];
}
}总体代码
<html>
<head> <title>js应用---下拉框联动</title></head>
<body>
<select id = "sltProvince" onchange="loadCity()">
<!--- <option>北京市</option>
onchange 1.下拉框层次改变
2.输入框
-->
</select>
<select id = "sltCity">
</select>
</body>
</html>
<script>
//定义存放所有省份数据的数组
var provinceList =["==请选择==","北京市","江西省","湖北省"];
//定义存放所有市数据的二维数组
var cityList=[
["==请选择=="],
["东城区","西城区","朝阳区"],
["南昌市","九江市","上饶市"],
["武汉市","荆州市"],
];
//定义加载省份下拉框的方法loadProvince
function loadProvince(){
//遍历provinceList数组中的元素
//动态增加选项option到下拉框sltProvince中
//1.1获得省份下拉框对象
var sltProvince = document.getElementById("sltProvince");
//1.2设置省份下拉框下拉选项的个数
sltProvince.length = provinceList.length;
//1.3遍历provinceList数组
for(var i=0;i<provinceList.length;i++){
//设置下拉框选项显示的内容
sltProvince.options[i].text= provinceList[i];
}
}
//定义根据当前选择的省份，加载对应市下拉框数据的方法
function loadCity(){
//1.获得所选择的省份选项序号
var idx = document.getElementById("sltProvince").selectedIndex;
//2.从cityList数组中，取idx行所在的数据
var cityData = cityList[idx];
//3.遍历cityData中的数据，载入到市下拉框sltCity中
var sltCity = document.getElementById("sltCity");
sltCity.length = cityData.length;
for(var i=0;i<cityData.length;i++){
sltCity.options[i].text = cityData[i];
}
}
//执行加载省份下拉框的方法
loadProvince();
</script>
