jQuery_13｜省市联动
Posted 接引之书
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery_13｜省市联动相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js\jquery-1.11.0.js"></script>
<script>
// ### JS代码 ###
//
// var provinces = [
// ["深圳市","东莞市","惠州市","广州市"],
// ["长沙市","岳阳市","株洲市","湘潭市"],
// ["厦门市","福州市","漳州市","泉州市"]
// ];
// function selectProvince(){
// var province = document.getElementById("province");
// var citySelect = document.getElementById("city");
// var value = province.value; //得到当前选中的省份
// var cities = provinces[value]; //从数组中获取到的城市
// citySelect.options.length = 0; //清空,初始化
// for(var i=0; i<cities.length; i++){
// var cityText = cities[i];
// var option1 = document.createElement("option"); //创建option节点 / createElement():创建元素节点
// var textNode = document.createTextNode(cityText); //创建城市文本节点 / createTextNode():创建文本节点
// option1.appendChild(textNode); //将城市的文本节点添加到option节点中去 / appendChild():把新的子节点添加到指定节点
// citySelect.appendChild(option1); //将option节点添加到select中去
// }
// }
// ### JS代码 ###
/*
1. 导入JQ的文件
2. 文档加载事件:页面初始化
3. 进一步确定事件: change事件
4. 函数: 得到当前选中省份
5. 得到城市, 遍历城市数据
6. 将遍历出来的城市添加到城市的select中
*/
var provinces = [
["深圳市","东莞市","惠州市","广州市"],
["长沙市","岳阳市","株洲市","湘潭市"],
["厦门市","福州市","漳州市","泉州市"]
];
$(function(){
$("#province").change(function(){
var cities = provinces[this.value]; //得到城市信息
$("#city").empty(); //采用jQuery的方式清空
$(cities).each(function(i,n){ //遍历城市数据
$("#city").append("<option>"+n+"</option>");
});
});
});
</script>
</head>
<body>
<!--选择省份-->
<!-- <select onchange="selectProvince()" id="province"> -->
<select id="province" >
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city"></select>
</body>
</html>
目录大纲 Directory outline
以上是关于jQuery_13｜省市联动的主要内容，如果未能解决你的问题，请参考以下文章