联动
无聊玩一下
直接上代码
要做的联动
<body>
国家：
<select id="gj"></select>
省：
<select id="cs"></select>
市：
<select id="s"></select>
</body>
准备数据
//包含有国家名称的数组
var guojia = ["--请选择--", "中国", "尼泊尔", "美国", "韩国", "德国"];
//包含有对应省的数组
var shengshi = [
["--请选择--"],
["--请选择--", "湖北", "湖南", "河北", "河南", "吉林", "黑龙江", "乌鲁木齐"],/*中国*/
["--请选择--", "比拉德讷格尔", "贾纳克布尔", "黑道达", "博卡拉"],/*尼泊尔*/
["--请选择--", "纽约", "洛杉矶", "旧金山", "芝加哥", "休斯顿"],/*，美国*/
["--请选择--", "首尔", "釜山", "仁川", "春川", "蔚山"],/*韩国*/
["--请选择--", "柏林", "汉堡市", "北莱茵-威斯特法伦州", "萨尔州"]/*德国*/
];
//包含对应市的数组
var dijishi = [
[["--请选择--"]],
[
["--请选择--"],
["--请选择--","武汉", "黄石", "潜江", "仙桃"],/*湖北*/
["--请选择--", "长沙", "株洲", "湘潭"],/*湖南*/
["--请选择--", "石家庄", "秦皇岛", "唐山"],/*河北*/
["--请选择--", "郑州", "开封", "新乡"],/*河南*/
["--请选择--", "长春", "辽源", "白城"],/*吉林*/
["--请选择--", "哈尔滨", "大庆", "伊春"],/*黑龙江*/
["--请选择--", "哈密", "博乐", "昌吉"],/*乌鲁木齐*/
],/*中国*/
];
//因为嫌数据输入的烦，就没添加别的国家的市
写添加数据的方法
添加国家
function f_gj() {
//把存有国家数据的数组循环一遍
for (var i = 0; i < guojia.length; i++) {
//创建一个option
var o = document.createElement('option');
o.text = guojia[i];//设置显示的值
o.value = guojia[i];//设置value
//把创建的option添加到下拉框中去
document.getElementById("gj").add(o);
}
}
添加省和市
//循环添加城市
function f_cs() {
//获取城市选项的长度
var index = document.getElementById("cs").length;
//循环删除所有的选项
for (var j = index-1; j > -1; j--) {
//移除下拉框对象中索引为j的选项
document.getElementById("cs").remove(j);
}
//如果不做以上操作下拉框中的选项会随着函数的触发只增不减
//获取国家下拉框选中的值对应的索引
var xiabiao1 = document.getElementById("gj").selectedIndex;
//循环一遍对应省的数据
for (var i = 0; i < shengshi[xiabiao1].length; i++) {
//创建一个option
var o = document.createElement('option');
o.text = shengshi[xiabiao1][i];//设置显示的值
o.value = shengshi[xiabiao1][i];//设置value
document.getElementById("cs").add(o);//添加
}
}
//循环添加市
function f_s() {
//获取市选项的长度
var index = document.getElementById("s").length;
//循环删除所有的选项
for (var j = index - 1; j > -1; j--) {
document.getElementById("s").remove(j);//移除
}
//国家下拉框选中值的索引
var xiabiao1 = document.getElementById("gj").selectedIndex;
//省下拉框选中值的索引
var xiabiao2 = document.getElementById("cs").selectedIndex;
//循环一遍对应市的数据
for (var i = 0; i < dijishi[xiabiao1][xiabiao2].length; i++) {
//创建一个option
var o = document.createElement('option');
o.text = dijishi[xiabiao1][xiabiao2][i];//设置显示的值
o.value = dijishi[xiabiao1][xiabiao2][i];//设置value
document.getElementById("s").add(o);//添加
}
}
执行方法
//加载事件
window.onload = function () {
f_gj();//执行添加国家的函数
f_cs();//执行添加省的函数
f_s();//执行添加市的函数
//以上是为了加载出“--请选择--”
//当国家下拉框的值改变的时候重新加载省下拉框的值
document.getElementById("gj").onchange = f_cs;
//当省的值改变的时候重新加载市的值
document.getElementById("cs").onchange = f_s;
}
完整代码
<script type="text/javascript">
//包含有国家名称的数组
var guojia = ["--请选择--", "中国", "尼泊尔", "美国", "韩国", "德国"];
//包含有对应省市的数组
var shengshi = [
["--请选择--"],
["--请选择--", "湖北", "湖南", "河北", "河南", "吉林", "黑龙江", "乌鲁木齐"],/*中国*/
["--请选择--", "比拉德讷格尔", "贾纳克布尔", "黑道达", "博卡拉"],/*尼泊尔*/
["--请选择--", "纽约", "洛杉矶", "旧金山", "芝加哥", "休斯顿"],/*，美国*/
["--请选择--", "首尔", "釜山", "仁川", "春川", "蔚山"],/*韩国*/
["--请选择--", "柏林", "汉堡市", "北莱茵-威斯特法伦州", "萨尔州"]/*德国*/
];
//包含对应地级市的数组
var dijishi = [
[["--请选择--"]],
[
["--请选择--"],
["--请选择--","武汉", "黄石", "潜江", "仙桃"],/*湖北*/
["--请选择--", "长沙", "株洲", "湘潭"],/*湖南*/
["--请选择--", "石家庄", "秦皇岛", "唐山"],/*河北*/
["--请选择--", "郑州", "开封", "新乡"],/*河南*/
["--请选择--", "长春", "辽源", "白城"],/*吉林*/
["--请选择--", "哈尔滨", "大庆", "伊春"],/*黑龙江*/
["--请选择--", "哈密", "博乐", "昌吉"],/*乌鲁木齐*/
],/*中国*/
];
//循环添加国家
function f_gj() {
for (var i = 0; i < guojia.length; i++) {
//创建一个option
var o = document.createElement('option');
o.text = guojia[i];//设置显示的值
o.value = guojia[i];//设置value
document.getElementById("gj").add(o);//添加选项到下拉框
}
}
//循环添加城市
function f_cs() {
//获取城市选项的长度
var index = document.getElementById("cs").length;
//循环删除所有的选项
for (var j = index-1; j > -1; j--) {
document.getElementById("cs").remove(j);
}
//国家下拉框选中值的索引
var xiabiao1 = document.getElementById("gj").selectedIndex;
for (var i = 0; i < shengshi[xiabiao1].length; i++) {
//创建一个option
var o = document.createElement('option');
o.text = shengshi[xiabiao1][i];//设置显示的值
o.value = shengshi[xiabiao1][i];//设置value
document.getElementById("cs").add(o);
}
}
//循环添加市
function f_s() {
//获取市选项的长度
var index = document.getElementById("s").length;
//循环删除所有的选项
for (var j = index - 1; j > -1; j--) {
document.getElementById("s").remove(j);
}
//国家下拉框选中值的索引
var xiabiao1 = document.getElementById("gj").selectedIndex;
//城市下拉框选中值的索引
var xiabiao2 = document.getElementById("cs").selectedIndex;
for (var i = 0; i < dijishi[xiabiao1][xiabiao2].length; i++) {
//创建一个option
var o = document.createElement('option');
o.text = dijishi[xiabiao1][xiabiao2][i];//设置显示的值
o.value = dijishi[xiabiao1][xiabiao2][i];//设置value
document.getElementById("s").add(o);
}
}
//加载事件
window.onload = function () {
f_gj();//执行添加国家的函数
f_cs();//执行添加省的函数
f_s();//执行添加市的函数
document.getElementById("gj").onchange = f_cs;//当国家下拉框的值改变的时候改变省下拉框的值
document.getElementById("cs").onchange = f_s;//当省的值改变的时候改变市的值
}
</script>
<body>
国家：
<select id="gj"></select>
省：
<select id="cs"></select>
市：
<select id="s"></select>
</body>