快捷導航

javascript實現(xiàn)的仿51job地址多項選擇方式效果

更新時間：2009年12月15日 18:37:52 作者：

分享一個類似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">  </style> </head> <body> <div   class="wppm3vysvbp"   id="main"> <input name="button" type="button" class="bton pointer" value="請選擇" onclick="openBg(1);openSelect(1)"/> <div   class="wppm3vysvbp"   id="result"> <div   id="wppm3vysvbp"   class="tit bgc_eee"> <h2>您已選擇的城市匯總</h2> </div> <div   id="wppm3vysvbp"   class="cont" id="makeSureItem"> </div> </div> </div> <div   class="wppm3vysvbp"   id="bg"> </div> <div   class="wppm3vysvbp"   id="selectItem" class="hidden"> <div   id="wppm3vysvbp"   class="tit bgc_ccc move" onmousedown="drag(event,this)"> <h2 class="left">請選擇城市</h2> <span id="wppm3vysvbp"    class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span> <span id="wppm3vysvbp"    class="pointer right" onclick="makeSure();">[確定]</span> </div> <div   id="wppm3vysvbp"   class="cls"></div> <div   id="wppm3vysvbp"   class="cont"> <div   class="wppm3vysvbp"   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   class="wppm3vysvbp"   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   class="wppm3vysvbp"   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   class="wppm3vysvbp"   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   class="wppm3vysvbp"   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   class="wppm3vysvbp"   id="preview"> <div   id="wppm3vysvbp"   class="tit bgc_eee c_999"> <h2>您已選擇的城市</h2> </div> <div   id="wppm3vysvbp"   class="cont" id="previewItem"> </div> </div> </div>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: