首页 > 代码库 > 地区三级联动--省份province
地区三级联动--省份province
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地区三级联动</title>
<script src="http://www.mamicode.com/jquery.js"></script>
</head>
<body>
<h2>地区三级联动</h2>
省份：
<select name="" id="province" >
<option value="http://www.mamicode.com/0">-请选择-</option>
</select>
城市：
<select name="" id="city">
<option value="http://www.mamicode.com/0">-请选择-</option>
</select>
地区：
<select name="" id="area">
<option value="http://www.mamicode.com/0">-请选择-</option>
</select>
</body>
<!--
将省份的信息显示给下拉列表
①ajax去服务器把xml的地区信息都请求回来
②从中筛选"省份"信息并显示
-->
<script type="text/javascript">
function show_province(){
//①ajax去服务器把xml的地区信息都请求回来
$.get(‘./ChinaArea.xml‘,function(msg){
//alert(msg);//ajax请求返回的是xml格式的文档对象
//对服务器返回的xml信息进行分析处理
/**
* 需要在 XMLDocument节点里获得province 元素节点
* province是XMLDocuemnt 的子节点
* 从父节点中获取内部的子节点$(父节点).find(子节点选择器)方法
*/
//console.log($(msg).find(‘province‘));//此时已获取所有省份的信息
$(msg).find(‘province‘).each(function(k,v){
//console.log($(this));//this分别依次代表每个province的dom对象
//获取省份的名称并显示给下拉列表
var nm = $(this).attr(‘province‘);//获取jquery对象的属性
var id = $(this).attr(‘provinceID‘);
// console.log(nm);
// 给select框"追加"省份名称
$(‘#province‘).append("<option value="http://www.mamicode.com/+id+">"+nm+"</option>");
});
},‘xml‘);
}
$(function(){//必须事件加载，所有的数据加载好，再调用show_province()函数
show_province();
});
</script>
</html>
地区三级联动--省份province
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。