您的位置：首页 > Web前端 > JQuery
jQuery二级联动*本地

2016-03-21 16:51 597 查看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/jquery-1.11.3.js"></script>
<title>二级联动案例</title>
<style>
select {
margin-left: 10px;
}

#province {
margin-left: 0px;
}
</style>
</head>
<body>
<select id="province">
<option>请选择</option>
<option>吉林省</option>
<option>辽宁省</option>
<option>山东省</option>
</select>
<script>
/*
需求 - 省份列表中具有数据,城市列表中没有任何数据
* 当用户选择了省份信息后,在城市列表中提供相对应的数据
<select>元素的特点
* <option>元素,无论设置value还是默认value
*/
// 1. 获取省份列表,绑定onchange事件
var provinceElement = document.getElementById("province");
provinceElement.onchange = function(){
// 清空城市列表
if($(this).val()=='请选择'){
$("#city").remove();
}else{
$("#city").remove();
$("#province").after("<select id='city'></select>")
var cityElement = document.getElementById("city");
var opts = cityElement.getElementsByTagName("option");
for(var z=0;z<opts.length;z++){
cityElement.removeChild(opts[z]);
z--;
}
}

/*
2. 得到用户选择的省份信息
* 第一种
* 根据id为province的select元素,查找所有option元素
* 遍历得到的所有option元素
* 使用if判断,哪个option元素具有selected属性
* 第二种
* 直接通过select元素的value属性值得到
*/
var provinceValue = provinceElement.value;
/*
3. 根据不同的省份提供不同的城市信息(数组)
* 吉林省 - 长春市,吉林市,松原市,四平市,通化市
* 辽宁省 - 沈阳市,大连市,铁岭市,丹东市,锦州市
* 山东省 - 济南市,青岛市,威海市,日照市,德州市
*/
var cities;
switch (provinceValue){
case "请选择":
cities = [];
break;
case "吉林省":
cities = ["请选择","长春市","吉林市","松原市","四平市","通化市"];
break;
case "辽宁省":
cities = ["请选择","沈阳市","大连市","铁岭市","丹东市","锦州市"];
break;
case "山东省":
cities = ["请选择","济南市","青岛市","威海市","日照市","德州市"];
break;
}
/*
4. 解析数组的数据内容
a. 遍历存储城市信息的数组
b. 得到每个城市信息
c. 创建<option>元素,将城市信息写入
d. 将创建的<option>元素添加到城市列表中
*/
for(var i=0;i<cities.length;i++){
var cityValue = cities[i];
var option = document.createElement("option");
var textNode = document.createTextNode(cityValue);
option.appendChild(textNode);

cityElement.appendChild(option);
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航