Ajax实现无刷新城市选择特效代码
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<title>Ajax实现无刷新城市选择特效代码 - www.webdm.cn</title>5
<meta http-equiv="content-type" content="text/html;charset=gb2312">6
<style type="text/css">
7
BODY {}{8
FONT-SIZE: 12px; PADDING-TOP: 50px9
}10
H2 {}{11
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px12
}13
.bton {}{14
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid15
}16
.cont {}{17
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px18
}19
#main {}{20
MARGIN: 0px auto; WIDTH: 400px21
}22
#selectItem {}{23
BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; MARGIN-TOP: 10px; Z-INDEX: 2; BACKGROUND: #fff; OVERFLOW: hidden; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 0px24
}25
#preview {}{26
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN: 1px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid27
}28
#result {}{29
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN-TOP: 10px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid30
}31
.tit {}{32
PADDING-LEFT: 10px; MARGIN: 1px; LINE-HEIGHT: 20px; HEIGHT: 20px33
}34
.bgc_ccc {}{35
BACKGROUND: #ccc36
}37
.bgc_eee {}{38
BACKGROUND: #eee39
}40
.c_999 {}{41
COLOR: #99942
}43
.pointer {}{44
CURSOR: pointer45
}46
.left {}{47
FLOAT: left48
}49
.right {}{50
FLOAT: right51
}52
.cls {}{53
CLEAR: both; FONT-SIZE: 0px; OVERFLOW: hidden; HEIGHT: 0px54
}55
#bg {}{56
DISPLAY: none; Z-INDEX: 1; BACKGROUND: #ccc; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; opacity: 0.757
}58
.hidden {}{59
DISPLAY: none60
}61
.move {}{62
CURSOR: move63
}64
</style>65
</head>66
<body>67
<DIV id="main">68
<INPUT class="bton pointer" onclick="openBg(1);openSelect(1)" type="button" value="请选择" name="button">69
<DIV id="result">70
<DIV class="tit bgc_eee">71
<H2>您已选择的城市汇总</H2>72
</DIV>73
<DIV class="cont" id="makeSureItem"></DIV>74
</DIV>75
</DIV>76
<DIV id="bg"></DIV>77
<DIV class="hidden" id="selectItem">78
<DIV class="tit bgc_ccc move" onmousedown="drag(event,this)">79
<H2 class="left">请选择城市：</H2>80
<SPAN class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</SPAN>81
<SPAN class="pointer right" onclick="makeSure();">[确定]</SPAN>82
</DIV>83
<DIV class="cls"></DIV>84
<DIV class="cont">85
<DIV id="selectSub">86
<SELECT style="MARGIN-BOTTOM: 10px" onchange="showSelect(this.value)" name="">87
<OPTION value="0" selected>中国名城</OPTION> 88
<OPTION value="1">魅力城市</OPTION>89
<OPTION value="2">东北三省</OPTION>90
<OPTION value="3">世界城市</OPTION>91
</SELECT> 92
<DIV id="c00">93
<INPUT onclick="addPreItem()" type="checkbox" value="北京" name="ck00">北京94
<INPUT onclick="addPreItem()" type="checkbox" value="福建" name="ck00">福建95
<INPUT onclick="addPreItem()" type="checkbox" value="四川" name="ck00">四川96
<INPUT onclick="addPreItem()" type="checkbox" value="江苏" name="ck00">江苏97
</DIV>98
<DIV id="c01">99
<INPUT onclick="addPreItem()" type="checkbox" value="上海" name="ck01">上海100
<INPUT onclick="addPreItem()" type="checkbox" value="云南" name="ck01">云南101
<INPUT onclick="addPreItem()" type="checkbox" value="贵州" name="ck01">贵州102
</DIV>103
<DIV id="c02">104
<INPUT onclick="addPreItem()" type="checkbox" value="黑龙江" name="ck01">黑龙江105
<INPUT onclick="addPreItem()" type="checkbox" value="吉林" name="ck01">吉林106
<INPUT onclick="addPreItem()" type="checkbox" value="辽宁" name="ck01">辽宁107
</DIV>108
<DIV id="c03">109
<INPUT onclick="addPreItem()" type="checkbox" value="美国" name="ck01">美国110
<INPUT onclick="addPreItem()" type="checkbox" value="阿富汗" name="ck01">阿富汗111
<INPUT onclick="addPreItem()" type="checkbox" value="日本" name="ck01">日本112
</DIV>113
</DIV>114
</DIV>115
<DIV id="preview">116
<DIV class="tit bgc_eee c_999">117
<H2>您已选择：</H2>118
</DIV>119
<DIV class="cont" id="previewItem"></DIV>120
</DIV>121
</DIV>122
<script type="text/javascript">123
var grow = $("selectSub").getElementsByTagName("option").length; //组数124
var showGrow = 0;//已打开组125
var selectCount = 0; //已选数量 126
showSelect(showGrow);127
var items = $("selectSub").getElementsByTagName("input");128
function $(o){129
if(typeof(o) == "string")130
return document.getElementById(o);131
return o;132
}133
function openBg(state){134
if(state == 1)135
{136
$("bg").style.display = "block";137
var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;138
$("bg").style.height = h + "px";139
}140
else141
{142
$("bg").style.display = "none";143
} 144
}145
function openSelect(state){146
if(state == 1) 147
{148
$("selectItem").style.display = "block";149
$("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px";150
$("selectItem").style.top = document.body.scrollTop + 100 + "px"; 151
}152
else153
{154
$("selectItem").style.display = "none";155
}156
}157
function showSelect(id){158
for(var i = 0 ; i < grow ;i++)159
{160
$("c0" + i).style.display = "none";161
}162
$("c0" + id).style.display = "block";163
showGrow = id;164
}165
function open(id,state){ 166
if(state == 1)167
$(id).style.display = "block";168
$(id).style.diaplay = "none";169
}170
function addPreItem(){ 171
$("previewItem").innerHTML = "";172
var len = 0 ;173
for(var i = 0 ; i < items.length ; i++)174
{175
if(items[i].checked == true)176
{177
var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>" + items[i].value;178
$("previewItem").innerHTML += mes;179
}180
}181
}182
function makeSure(){183
openBg(0);184
openSelect(0);185
copyItem("previewItem","makeSureItem") 186
}187
function copyHTML(id1,id2){188
$(id2).innerHTML = $("id1").innerHTML;189
}190
function copyItem(id1,id2){191
192
var mes = "";193
var items2 = $(id1).getElementsByTagName("input");194
for(var i = 0 ; i < items2.length ; i++)195
{196
if(items2[i].checked == true)197
{198
mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem(\"" + id2+ "\",\""+ id1 +"\");same(this);'>" + items2[i].value; 199
}200
}201
$(id2).innerHTML = "";202
$(id2).innerHTML += mes;203
}204
function same(ck){205
for(var i = 0 ; i < items.length ; i++)206
{207
if(ck.value == items[i].value)208
{209
items[i].checked = ck.checked;210
}211
}212
} 213
var oDrag = "";214
var ox,oy,nx,ny,dy,dx;215
function drag(e,o){216
var e = e ? e : event;217
var mouseD = document.all ? 1 : 0;218
if(e.button == mouseD)219
{220
oDrag = o.parentNode;221
ox = e.clientX;222
oy = e.clientY; 223
}224
}225
function dragPro(e){226
if(oDrag != "")227
{ 228
var e = e ? e : event;229
dx = parseInt($(oDrag).style.left);230
dy = parseInt($(oDrag).style.top);231
nx = e.clientX;232
ny = e.clientY;233
$(oDrag).style.left = (dx + ( nx - ox )) + "px";234
$(oDrag).style.top = (dy + ( ny - oy )) + "px";235
ox = nx;236
oy = ny;237
}238
}239
document.onmouseup = function(){oDrag = "";}240
document.onmousemove = function(event){dragPro(event);}241
</script>242
</body>243
</html>244
245
246
