开发--省级三联动,简单的代码,但是功能不差

没什么好说的,不废话上代码,直接给select的上层DIV 添加 id="areaSelect “就可以了,是不是很方便呢,city.js的代码我下边贴下载链接

http://dl42.yunpan.360.cn/intf.php?method=Download.downloadFile&qid=574751937&fname=%2Fcity.zip&fhash=4754540ecf810ed5c7c01eea059e5ea4742558a5&dt=42_42.1d87f6e5349b0518e64409844fe93722&v=1.0.1&rtick=14561393801362&open_app_id=0&devtype=web&sign=ebaa65a8214b8b8b935d8bca293009c0&

 

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="areaSelect">
<select style="height: 36px;">
<option></option>

</select>
<select style="height: 36px;">
<option></option>

</select>
<select style="height: 36px;">
<option></option>

</select>
</div>

<script type="text/javascript" src="city.js" charset="gb2312"></script>
<script type="text/javascript">
//初始数据并绑定事件,不要忘记了charset="gb2312",否则显示不出来,全是显示的乱码
function areaSelect(node) {
var node = document.getElementById(node)
var selTag = node.getElementsByTagName('select'),
arg = [];
for (var i = 0, j; j = selTag[i++];) {
arg.push(j.options[j.selectedIndex].text);
j.rel = i;
j.onchange = function() {
eventFun.call(area, this.rel, this.options[this.selectedIndex].text, selTag);
}
}
var area = new Areasel(selTag, arg[0] || '', arg[1] || '', arg[2] || '');
}
function eventFun(a, name, tag) {
switch (a) {
case 1:
this.area.getCity(name);
break;
case 2:
this.area.getDistrict(name);
break;
case 3:
return;
}
this.setHTML(a, tag)
}
var Areasel = function(tag, p, c, d) {
this.area = new getArea(p, c, d);
this.setHTML(0, tag);
}
Areasel.prototype.setHTML = function(a, tag) {
var name = [this.area.pName, this.area.cName, this.area.dName];
var dat = [this.area.pDat, this.area.cDat, this.area.dDat];
for (var i = a; i < tag.length; i++) {
tag[i].options.length = 0;
tag[i].add(new Option(this.area.text[i]));
this.createHTML(name[i], dat[i], tag[i]);
}
}
Areasel.prototype.createHTML = function(name, arr, tag) {
var temp;
for (var i = 0, j; j = arr[i++];) {
temp = new Option(j);
if (j == name) temp.selected = true;
tag.add(temp);
}
}
new areaSelect('areaSelect')
</script>

</body>

</html>

posted @ 2016-02-22 19:12  绿罗兰  阅读(201)  评论(0编辑  收藏  举报