<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var data = {
"北京市": ["海淀区","朝阳区","丰台区"],
"河北省": ["石家庄","唐山","秦皇岛"],
"辽宁省": ["沈阳","大连","鞍山"],
"山东省": ["青岛","济南","烟台"]
}
/* --通过js实现二级联动下拉框-- */
function getCountry(){
//获取select元素
var oSelect = document.getElementsByName("country")[0];
}
/* 练习2 */
function selectCity(thisobj) {
//1.获取用户选中的省份
var index = thisobj.selectedIndex;
var prov = thisobj.options[index].value;
//2.根据省份获取该省份下所有的城市列表 北京市
var arrCity = data[prov];
var citySpan = document.getElementById("citySpan");
citySpan.innerHTML = "<select id='city'><option>--选择城市--</option></select>";
//-------------------------------------------------------------
//3.将该省份下所有的城市 作为option选项填充到第二个select列表中
//>>获取第二个select
var oCity = document.getElementById("city");
//海淀区 --> <option>海淀区</option>
for (var i = 0; i < arrCity.length; i++) {
var oOpt = document.createElement("option");
oOpt.appendChild(document.createTextNode(arrCity[i]));
oCity.appendChild(oOpt);
}
}
</script>
</head>
<body>
<select name="country" onchange="getCountry()" >
<option value="none">--选择国家--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
<br><br>
<hr/>
<br>
<div id="seleDiv">
<select id="province" onchange="selectCity(this)">
<option>--选择省市--</option>
<option>北京市</option>
<option>河北省</option>
<option>辽宁省</option>
<option>山东省</option>
</select>
<span id="citySpan">
<select id="city">
<option>--选择城市--</option>
</select>
</span>
</div>
</body>
</html>
javascript实现兼容的下拉选框联动
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- onchange事件是在表单项的value值发生变化后触发执行，作用在input、select、textarea元...
- 代码不一定可执行，但都会展示出核心逻辑。 js部分代码如下： 通过获取到年、月来确定日的天数。 通过选中的开始检索...
- xcode-8.0 打印JSON数据不完整，只打印了一部分 后台返回一段很长的数据，在输出台打印出来的数据只显示了...
