有了上一个博客的基础，我们现在来做一个地址插件：
首先还是Area.xml文件，这里就不展示了：
HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#province{
margin: 4px;
}
#city{
margin: 4px;
}
#country{
margin: 4px;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.address.js"></script>
<script type="text/javascript">
$(function(){
$("#address").getAddress();
})
</script>
</head>
<body>
<div id="address"></div>
</body>
</html>
JS插件：
(function($){
$.fn.getAddress = function(options){
var settings = $.extend({
url:"Area.xml",
province:"province",
city:"city",
country:"country",
attrName:"name",
attrValue:"value"
},options||{});
var data;
$.get(settings.url,function(value){
data = value;
//获得省份数据
getNode(settings.province,ps);
});
var ps = $("<select id=‘province‘><option>请选择省份</option><select>");
var cis = $("<select id=‘city‘><option>请选择城市</option><select>");
var cns = $("<select id=‘country‘><option>请选择地区</option><select>");
this.append(ps);
this.append(cis);
this.append(cns);
//当点击省份时，获得下面的city
ps.on("change",function(){
cis.find("option:gt(0)").remove();//先清空后面的select
cns.find("option:gt(0)").remove();
getNode(settings.province+"[value="+$(this).attr(settings.attrValue)+"] "+settings.city,cis);
});
//当点击城市时，获得下面的地区
cis.on("change",function(){
cns.find("option:gt(0)").remove();
getNode(settings.city+"[value="+$(this).attr(settings.attrValue)+"] "+settings.country,cns);
});
function getNode(node,id){
$(data).find(node).each(function(){
id.append(creteOption($(this)));
});
}
function creteOption(obj){
return "<option value="+obj.attr(settings.attrValue)+">"+obj.attr(settings.attrName)+"</option>";
}
}
})(jQuery)
时间： 2024-10-20 02:43:45