本文提供一段JavaScript实现的仿51job地址多项选择效果的代码示例。通过HTML结构与JS交互，实现城市或地区的选择功能，包含运行、复制和保存代码的按钮操作。
仿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> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]