资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
javascript实现的仿51job地址多项选择方式效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>类似51job效果的地址选择</title> <style type="text/css"> <!-- body{padding-top:50px;font-size:12px;} h2{margin:0px;padding:0px;font-size:12px;font-weight:bold;} .bton{border:1px solid #CCC;background:#DDD;} .cont{padding:10px;} #main{width:400px;margin:0px auto;} #selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;margin-top:10px;width:400px;z-index:2;} #preview{margin:1px;border:1px solid #CCC;} #result{border:1px solid #CCC;margin-top:10px;} .tit{line-height:20px;height:20px;margin:1px;padding-left:10px;} .bgc_ccc{background:#CCC;} .bgc_eee{background:#eee;} .c_999{color:#999} .pointer{cursor:pointer;} .left{float:left;} .right{float:right;} .cls{clear:both;font-size:0px;height:0px;overflow:hidden;} #bg{background:#CCC;filter:alpha(opacity=70);opacity:0.7;width:100%;;position:absolute;left:0px;top:0px;display:none;z-index:1;} .hidden{display:none;} .move{cursor:move;} --> </style> </head> <body> <div id="main"> <input name="button" type="button" class="bton pointer" value="请选择" onclick="openBg(1);openSelect(1)"/> <div id="result"> <div class="tit bgc_eee"> <h2>您已选择的城市汇总</h2> </div> <div class="cont" id="makeSureItem"> </div> </div> </div> <div id="bg"> </div> <div id="selectItem" class="hidden"> <div class="tit bgc_ccc move" onmousedown="drag(event,this)"> <h2 class="left">请选择城市</h2> <span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span> <span class="pointer right" onclick="makeSure();">[确定]</span> </div> <div class="cls"></div> <div class="cont"> <div id="selectSub"> <select name="" onchange="showSelect(this.value)" style="margin-bottom:10px;"> <option value="0">第0层</option> <option value="1">第1层</option> <option value="2">第2层</option> <option value="3">第3层</option> </select> <div id="c00"> <input type="checkbox" name="ck00" onclick="addPreItem()" value="北京"/>北京 <input type="checkbox" name="ck00" onclick="addPreItem()" value="福建"/>福建 <input type="checkbox" name="ck00" onclick="addPreItem()" value="四川"/>四川 <input type="checkbox" name="ck00" onclick="addPreItem()" value="江苏"/>江苏 </div> <div id="c01"> <input type="checkbox" name="ck01" onclick="addPreItem()" value="上海"/>上海 <input type="checkbox" name="ck01" onclick="addPreItem()" value="云南"/>云南 <input type="checkbox" name="ck01" onclick="addPreItem()" value="贵州"/>贵州 </div> <div id="c02"> <input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龙江"/>黑龙江 <input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林"/>吉林 <input type="checkbox" name="ck01" onclick="addPreItem()" value="辽宁"/>辽宁 </div> <div id="c03"> <input type="checkbox" name="ck01" onclick="addPreItem()" value="美国"/>美国 <input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗"/>阿富汗 <input type="checkbox" name="ck01" onclick="addPreItem()" value="日本"/>日本 </div> </div> </div> <div id="preview"> <div class="tit bgc_eee c_999"> <h2>您已选择的城市</h2> </div> <div class="cont" id="previewItem"> </div> </div> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F*%20------%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E-----%20*%2F%20%0D%0A%2F*%20%0D%0A%E6%B7%BB%E5%8A%A0%E5%9F%8E%E5%B8%82%E6%96%B9%E6%B3%95%EF%BC%9A%20%0D%0A%E6%B7%BB%E5%8A%A0%E7%BB%84%EF%BC%9A%E6%89%BE%E5%88%B0id%20%E6%98%AF%20%22selectSub%22%E4%B8%ADselect%E6%A0%87%E7%AD%BE%E4%B8%8B%EF%BC%8C%E6%B7%BB%E5%8A%A0option%E6%A0%87%E7%AD%BE%20value%E5%B1%9E%E6%80%A7%E9%80%92%E5%A2%9E%EF%BC%8C%E6%89%BE%E5%88%B0%20id%20%E6%98%AF%20%22selectSub%22%2C%E6%8C%89%E7%85%A7%E5%8E%9F%E6%9C%89%E6%A0%BC%E5%BC%8F%E6%B7%BB%E5%8A%A0div%2C%E5%85%B6id%E5%B1%9E%E6%80%A7%E9%80%92%E5%A2%9E%20%0D%0A%E6%B7%BB%E5%8A%A0%E4%BA%8C%E7%BA%A7%E5%82%85%E9%80%89%E7%9F%BF%E9%80%89%E9%A1%B9%20%0D%0A%E5%A4%8D%E5%88%B6%20id%20%E6%98%AF%20%22selectSub%22%20%E4%B8%8B%E4%BB%BB%E6%84%8Finput%E6%A0%87%E7%AD%BE%EF%BC%8C%E7%B2%98%E8%B4%B4%E5%9C%A8%E9%9C%80%E8%A6%81%E6%B7%BB%E5%8A%A0%E7%9A%84%E4%BD%8D%E7%BD%AE%E3%80%82%20%0D%0A*%2F%20%0D%0Avar%20grow%20%3D%20%24(%22selectSub%22).getElementsByTagName(%22option%22).length%3B%20%2F%2F%E7%BB%84%E6%95%B0%20%0D%0Avar%20showGrow%20%3D%200%3B%2F%2F%E5%B7%B2%E6%89%93%E5%BC%80%E7%BB%84%20%0D%0Avar%20selectCount%20%3D%200%3B%20%2F%2F%E5%B7%B2%E9%80%89%E6%95%B0%E9%87%8F%20%0D%0AshowSelect(showGrow)%3B%20%0D%0Avar%20items%20%3D%20%24(%22selectSub%22).getElementsByTagName(%22input%22)%3B%20%0D%0A%0D%0Afunction%20%24(o)%7B%20%2F%2F%E8%8E%B7%E5%8F%96%E5%AF%B9%E8%B1%A1%20%0D%0Aif(typeof(o)%20%3D%3D%20%22string%22)%20%0D%0Areturn%20document.getElementById(o)%3B%20%0D%0Areturn%20o%3B%20%0D%0A%7D%20%0D%0Afunction%20openBg(state)%7B%20%2F%2F%E9%81%AE%E7%85%A7%E6%89%93%E5%BC%80%E5%85%B3%E9%97%AD%E6%8E%A7%E5%88%B6%20%0D%0Aif(state%20%3D%3D%201)%20%0D%0A%7B%20%0D%0A%24(%22bg%22).style.display%20%3D%20%22block%22%3B%20%0D%0Avar%20h%20%3D%20document.body.offsetHeight%20%3E%20document.documentElement.offsetHeight%20%3F%20document.body.offsetHeight%20%3A%20document.documentElement.offsetHeight%3B%20%0D%0A%24(%22bg%22).style.height%20%3D%20h%20%2B%20%22px%22%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0A%24(%22bg%22).style.display%20%3D%20%22none%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20openSelect(state)%7B%20%2F%2F%E9%80%89%E6%8B%A9%E5%9F%8E%E5%B8%82%E5%B1%82%E5%85%B3%E9%97%AD%E6%89%93%E5%BC%80%E6%8E%A7%E5%88%B6%20%0D%0Aif(state%20%3D%3D%201)%20%0D%0A%7B%20%0D%0A%24(%22selectItem%22).style.display%20%3D%20%22block%22%3B%20%0D%0A%24(%22selectItem%22).style.left%20%3D%20(%24(%22bg%22).offsetWidth%20-%20%24(%22selectItem%22).offsetWidth)%2F2%20%2B%20%22px%22%3B%20%0D%0A%24(%22selectItem%22).style.top%20%3D%20document.body.scrollTop%20%2B%20100%20%2B%20%22px%22%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0A%24(%22selectItem%22).style.display%20%3D%20%22none%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20showSelect(id)%7B%20%0D%0Afor(var%20i%20%3D%200%20%3B%20i%20%3C%20grow%20%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0A%24(%22c0%22%20%2B%20i).style.display%20%3D%20%22none%22%3B%20%0D%0A%7D%20%0D%0A%24(%22c0%22%20%2B%20id).style.display%20%3D%20%22block%22%3B%20%0D%0AshowGrow%20%3D%20id%3B%20%0D%0A%7D%20%0D%0Afunction%20open(id%2Cstate)%7B%20%2F%2F%E6%98%BE%E7%A4%BA%E9%9A%90%E8%97%8F%E6%8E%A7%E5%88%B6%20%0D%0Aif(state%20%3D%3D%201)%20%0D%0A%24(id).style.display%20%3D%20%22block%22%3B%20%0D%0A%24(id).style.diaplay%20%3D%20%22none%22%3B%20%0D%0A%7D%20%0D%0Afunction%20addPreItem()%7B%20%0D%0A%24(%22previewItem%22).innerHTML%20%3D%20%22%22%3B%20%0D%0Avar%20len%E3%80%80%3D%200%20%3B%20%0D%0Afor(var%20i%20%3D%200%20%3B%20i%20%3C%20items.length%20%3B%20i%2B%2B)%20%0D%0A%7B%20%0D%0Aif(items%5Bi%5D.checked%20%3D%3D%20true)%20%0D%0A%7B%20%0D%0Avar%20mes%20%3D%20%22%3Cinput%20type%3D'checkbox'%20checked%3D'true'%20value%3D'%22%2B%20items%5Bi%5D.value%20%2B%22'%20onclick%3D'copyItem(%5C%22previewItem%5C%22%2C%5C%22previewItem%5C%22)%3Bsame(this)%3B'%3E%22%20%2B%20items%5Bi%5D.value%3B%20%0D%0A%24(%22previewItem%22).innerHTML%20%2B%3D%20mes%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20makeSure()%7B%20%0D%0A%2F%2Falert(1)%3B%20%0D%0A%2F%2F%24(%22makeSureItem%22).innerHTML%20%3D%20%24(%22previewItem%22).innerHTML%3B%20%0D%0AopenBg(0)%3B%20%0D%0AopenSelect(0)%3B%20%0D%0AcopyItem(%22previewItem%22%2C%22makeSureItem%22)%20%0D%0A%7D%20%0D%0Afunction%20copyHTML(id1%2Cid2)%7B%20%0D%0A%24(id2).innerHTML%20%3D%20%24(%22id1%22).innerHTML%3B%20%0D%0A%7D%20%0D%0Afunction%20copyItem(id1%2Cid2)%7B%20%0D%0A%0D%0Avar%20mes%20%3D%20%22%22%3B%20%0D%0Avar%20items2%20%3D%20%24(id1).getElementsByTagName(%22input%22)%3B%20%0D%0Afor(var%20i%20%3D%200%20%3B%20i%20%3C%20items2.length%20%3B%20i%2B%2B)%20%0D%0A%7B%20%0D%0Aif(items2%5Bi%5D.checked%20%3D%3D%20true)%20%0D%0A%7B%20%0D%0Ames%20%2B%3D%20%22%3Cinput%20type%3D'checkbox'%20checked%3D'true'%20value%3D'%22%2B%20items2%5Bi%5D.value%20%2B%22'%20onclick%3D'copyItem(%5C%22%22%20%2B%20id2%2B%20%22%5C%22%2C%5C%22%22%2B%20id1%20%2B%22%5C%22)%3Bsame(this)%3B'%3E%22%20%2B%20items2%5Bi%5D.value%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%24(id2).innerHTML%20%3D%20%22%22%3B%20%0D%0A%24(id2).innerHTML%20%2B%3D%20mes%3B%20%0D%0A%7D%20%0D%0Afunction%20same(ck)%7B%20%0D%0Afor(var%20i%20%3D%200%20%3B%20i%20%3C%20items.length%20%3B%20i%2B%2B)%20%0D%0A%7B%20%0D%0Aif(ck.value%20%3D%3D%20items%5Bi%5D.value)%20%0D%0A%7B%20%0D%0Aitems%5Bi%5D.checked%20%3D%20ck.checked%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F*%20%E9%BC%A0%E6%A0%87%E6%8B%96%E5%8A%A8%20*%2F%20%0D%0Avar%20oDrag%20%3D%20%22%22%3B%20%0D%0Avar%20ox%2Coy%2Cnx%2Cny%2Cdy%2Cdx%3B%20%0D%0Afunction%20drag(e%2Co)%7B%20%0D%0Avar%20e%20%3D%20e%20%3F%20e%20%3A%20event%3B%20%0D%0Avar%20mouseD%20%3D%20document.all%20%3F%201%20%3A%200%3B%20%0D%0Aif(e.button%20%3D%3D%20mouseD)%20%0D%0A%7B%20%0D%0AoDrag%20%3D%20o.parentNode%3B%20%0D%0A%2F%2Falert(oDrag.id)%3B%20%0D%0Aox%20%3D%20e.clientX%3B%20%0D%0Aoy%20%3D%20e.clientY%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20dragPro(e)%7B%20%0D%0Aif(oDrag%20!%3D%20%22%22)%20%0D%0A%7B%20%0D%0Avar%20e%20%3D%20e%20%3F%20e%20%3A%20event%3B%20%0D%0Adx%20%3D%20parseInt(%24(oDrag).style.left)%3B%20%0D%0Ady%20%3D%20parseInt(%24(oDrag).style.top)%3B%20%0D%0Anx%20%3D%20e.clientX%3B%20%0D%0Any%20%3D%20e.clientY%3B%20%0D%0A%24(oDrag).style.left%20%3D%20(dx%20%2B%20(%20nx%20-%20ox%20))%20%2B%20%22px%22%3B%20%0D%0A%24(oDrag).style.top%20%3D%20(dy%20%2B%20(%20ny%20-%20oy%20))%20%2B%20%22px%22%3B%20%0D%0Aox%20%3D%20nx%3B%20%0D%0Aoy%20%3D%20ny%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Adocument.onmouseup%20%3D%20function()%7BoDrag%20%3D%20%22%22%3B%7D%20%0D%0Adocument.onmousemove%20%3D%20function(event)%7BdragPro(event)%3B%7D%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程