JS實(shí)現(xiàn)類似51job上的地區(qū)選擇效果示例

2019-11-19 18:57:18

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了JS實(shí)現(xiàn)類似51job上的地區(qū)選擇效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>地區(qū)選擇效果</title></head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">BODY {FONT-SIZE: 12px; PADDING-TOP: 50px}H2 {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}.bton {BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid}.cont {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px}#main {MARGIN: 0px auto; WIDTH: 400px}#selectItem {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: 0px}#preview {BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN: 1px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid}#result {BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN-TOP: 10px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid}.tit {PADDING-LEFT: 10px; MARGIN: 1px; LINE-HEIGHT: 20px; HEIGHT: 20px}.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; OVERFLOW: hidden; HEIGHT: 0px}#bg {DISPLAY: none; Z-INDEX: 1; BACKGROUND: #ccc; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; opacity: 0.7}.hidden {DISPLAY: none}.move {CURSOR: move}</style><meta content="MSHTML 6.00.2900.3314" name="GENERATOR" /><div id="main"><input pointer" onclick="openBg(1);openSelect(1)" type="button" name="button" value="請選擇" /><div id="result"><div bgc_eee"><h2>您已選擇的城市匯總</h2></div><div id="makeSureItem"></div></div></div><div id="bg"></div><div id="selectItem"><div bgc_ccc move" onmousedown="drag(event,this)"><h2 right" onclick="openBg(0);openSelect(0);">[取消]</span> <span right" onclick="makeSure();">[確定]</span> </div><div id="selectSub"><select style="MARGIN-BOTTOM: 10px" onchange="showSelect(this.value)" name=""><option value="0" selected="selected">第0層</option><option value="1">第1層</option><option value="2">第2層</option><option value="3">第3層</option></select><div id="c00"><input onclick="addPreItem()" type="checkbox" name="ck00" value="北京" />北京 <input onclick="addPreItem()" type="checkbox" name="ck00" value="福建" />福建 <input onclick="addPreItem()" type="checkbox" name="ck00" value="四川" />四川 <input onclick="addPreItem()" type="checkbox" name="ck00" value="江蘇" />江蘇 </div><div id="c01"><input onclick="addPreItem()" type="checkbox" name="ck01" value="上海" />上海 <input onclick="addPreItem()" type="checkbox" name="ck01" value="云南" />云南 <input onclick="addPreItem()" type="checkbox" name="ck01" value="貴州" />貴州 </div><div id="c02"><input onclick="addPreItem()" type="checkbox" name="ck01" value="黑龍江" />黑龍江 <input onclick="addPreItem()" type="checkbox" name="ck01" value="吉林" />吉林 <input onclick="addPreItem()" type="checkbox" name="ck01" value="遼寧" />遼寧 </div><div id="c03"><input onclick="addPreItem()" type="checkbox" name="ck01" value="美國" />美國 <input onclick="addPreItem()" type="checkbox" name="ck01" value="阿富汗" />阿富汗 <input onclick="addPreItem()" type="checkbox" name="ck01" value="日本" />日本 </div></div></div><div id="preview"><div bgc_eee c_999"><h2>您已選擇的城市</h2></div><div id="previewItem"></div></div></div><SCRIPT type=text/javascript>/* ------使用說明----- *//*添加城市方法：  添加組：找到id 是 "selectSub"中select標(biāo)簽下，添加option標(biāo)簽 value屬性遞增，找到 id 是 "selectSub",按照原有格式添加div,其id屬性遞增添加二級傅選礦選項(xiàng)復(fù)制 id 是 "selectSub" 下任意input標(biāo)簽，粘貼在需要添加的位置。*/var grow = $("selectSub").getElementsByTagName("option").length; //組數(shù)var showGrow = 0;//已打開組var selectCount = 0; //已選數(shù)量 showSelect(showGrow);var items = $("selectSub").getElementsByTagName("input");//alert(maxItem);//var lenMax = 2; //alert(1);function $(o){ //獲取對象if(typeof(o) == "string")return document.getElementById(o);return o;}function openBg(state){ //遮照打開關(guān)閉控制if(state == 1){$("bg").style.display = "block";var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;//alert(document.body.offsetHeight);//alert(document.documentElement.offsetHeight);$("bg").style.height = h + "px";}else{$("bg").style.display = "none";}}function openSelect(state){ //選擇城市層關(guān)閉打開控制if(state == 1){$("selectItem").style.display = "block";$("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px";$("selectItem").style.top = document.body.scrollTop + 100 + "px";}else{$("selectItem").style.display = "none";}}function showSelect(id){for(var i = 0 ; i < grow ;i++){$("c0" + i).style.display = "none";}$("c0" + id).style.display = "block";showGrow = id;}function open(id,state){ //顯示隱藏控制if(state == 1)$(id).style.display = "block";$(id).style.diaplay = "none";}function addPreItem(){$("previewItem").innerHTML = "";var len　= 0 ;for(var i = 0 ; i < items.length ; i++){if(items[i].checked == true){//len++;//if(len > lenMax)//{//alert("不能超過" + lenMax +"個(gè)選項(xiàng)！")//return false;//}var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(/"previewItem/",/"previewItem/");same(this);'>" + items[i].value;$("previewItem").innerHTML += mes;//alert(items[i].value);}}}function makeSure(){//alert(1);//$("makeSureItem").innerHTML = $("previewItem").innerHTML;openBg(0);openSelect(0);copyItem("previewItem","makeSureItem")}function copyHTML(id1,id2){$(id2).innerHTML = $("id1").innerHTML;}function copyItem(id1,id2){var mes = "";var items2 = $(id1).getElementsByTagName("input");for(var i = 0 ; i < items2.length ; i++){if(items2[i].checked == true){mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem(/"" + id2+ "/",/""+ id1 +"/");same(this);'>" + items2[i].value;}}$(id2).innerHTML = "";$(id2).innerHTML += mes;//alert($(id2).innerHTML);}function same(ck){for(var i = 0 ; i < items.length ; i++){if(ck.value == items[i].value){items[i].checked = ck.checked;}}}/* 鼠標(biāo)拖動(dòng) */var oDrag = "";var ox,oy,nx,ny,dy,dx;function drag(e,o){var e = e ? e : event;var mouseD = document.all ? 1 : 0;if(e.button == mouseD){oDrag = o.parentNode;//alert(oDrag.id);ox = e.clientX;oy = e.clientY;}}function dragPro(e){if(oDrag != ""){var e = e ? e : event;//$(oDrag).style.left = $(oDrag).offsetLeft + "px";//$(oDrag).style.top = $(oDrag).offsetTop + "px";dx = parseInt($(oDrag).style.left);dy = parseInt($(oDrag).style.top);//dx = $(oDrag).offsetLeft;//dy = $(oDrag).offsetTop;nx = e.clientX;ny = e.clientY;$(oDrag).style.left = (dx + ( nx - ox )) + "px";$(oDrag).style.top = (dy + ( ny - oy )) + "px";ox = nx;oy = ny;}}document.onmouseup = function(){oDrag = "";}document.onmousemove = function(event){dragPro(event);}</SCRIPT>

運(yùn)行效果圖如下：