仿中华英才网城市选择
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>类似中华英才网，51job的地区选择效果</TITLE><META http-equiv=Content-Type content="text/html; charset=GBK"><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><script language="javascript" type="text/javascript">//首先要初始化 var xmlDoc; var nodeIndex; function getxmlDoc() { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); var currNode; xmlDoc.async=false; xmlDoc.load("Area.xml"); if(xmlDoc.parseError.errorCode!=0) { var myErr=xmlDoc.parseError; alert("出错！"+myErr.reason); } }function Init(){//打开xmldocm文档getxmlDoc();var dropElement1=document.getElementById('select1'); var TopnodeList=xmlDoc.selectSingleNode("address").childNodes; if(TopnodeList.length>0) { //省份列表 var country; var province; var city; for(var i=0; i<TopnodeList.length; i++) { //添加列表项目 country=TopnodeList[i]; var eOption=document.createElement("option"); eOption.value=country.getAttribute("name"); eOption.text=country.getAttribute("name"); dropElement1.add(eOption); } } }</script></HEAD><BODY onload="Init();"><DIV id=main> <INPUT onclick=openBg(1);openSelect(1) type=button value=请选择 name=button> <DIV id=result> <DIV onmousedown=drag(event,this)> <H2 class=left>请选择城市</H2> <SPAN onclick=openBg(0);openSelect(0);>[取消]</SPAN> <SPAN onclick=makeSure();>[确定]</SPAN> </DIV> <DIV class=cls></DIV> <DIV class=cont> <DIV id=selectSub> <SELECT style="MARGIN-BOTTOM: 10px" onchange=showSelect(this.value) name="" id="select1"> </SELECT> <DIV id=c00> </DIV> </DIV> </DIV> <DIV id=preview> <DIV 下任意input标签，粘贴在需要添加的位置。*///var grow = $("selectSub").getElementsByTagName("option").length; //组数//var showGrow = 0;//已打开组//var selectCount = 0; //已选数量 var temp="";//showSelect(showGrow);//alert(maxItem);//var lenMax = 2; //alert(1);function $(o){ //获取对象if(typeof(o) == "string")return document.getElementById(o);return o;}function openBg(state){ //遮照打开关闭控制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){ //选择城市层关闭打开控制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(name){ var countryNodes=xmlDoc.selectSingleNode('//address/province[@name="'+name+'"]'); $("c00").innerHTML=""; if(countryNodes.childNodes.length>0){ for(var i=0;i<countryNodes.childNodes.length;i++){ var province=document.createElement("input"); province.type="checkbox"; province.name="province11" var provinceNode=countryNodes.childNodes[i]; province.value=provinceNode.getAttribute("name"); province.onclick=function(){addPreItem();}; var txt=document.createTextNode(provinceNode.getAttribute("name")) $("c00").appendChild(province); $("c00").appendChild(txt); } } temp=$("previewItem").innerHTML;}function open(id,state){ //显示隐藏控制if(state == 1)$(id).style.display = "block";$(id).style.diaplay = "none";}function addPreItem(){var items = $("selectSub").getElementsByTagName("input");$("previewItem").innerHTML='';var len = 0 ;$("previewItem").innerHTML +=temp;for(var i = 0 ; i < items.length ; i++){if(items[i].checked == true){//len++;//if(len > lenMax)//{//alert("不能超过" + lenMax +"个选项！")//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){var items = $("selectSub").getElementsByTagName("input");for(var i = 0 ; i < items.length ; i++){if(ck.value == items[i].value){items[i].checked = ck.checked;}}}/* 鼠标拖动 */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></BODY></HTML>?
<?xml version="1.0" encoding="gb2312" ?> <address> <province name="北京市"> <city name="北京辖区"> <country name="东城区" /> <country name="西城区" /> <country name="崇文区" /> <country name="宣武区" /> <country name="朝阳区" /> <country name="丰台区" /> <country name="石景山区" /> <country name="海淀区" /> <country name="门头沟区" /> <country name="房山区" /> <country name="通州区" /> <country name="顺义区" /> <country name="昌平区" /> <country name="大兴区" /> <country name="怀柔区" /> <country name="平谷区" /> </city> <city name="北京辖县"> <country name="密云县" /> <country name="延庆县" /> </city> </province> <province name="天津市"> <city name="天津辖区"> <country name="和平区" /> <country name="河东区" /> <country name="河西区" /> <country name="南开区" /> <country name="河北区" /> <country name="红桥区" /> <country name="塘沽区" /> <country name="汉沽区" /> <country name="大港区" /> <country name="东丽区" /> <country name="西青区" /> <country name="津南区" /> <country name="北辰区" /> <country name="武清区" /> <country name="宝坻区" /> </city> <city name="天津辖县"> <country name="宁河县" /> <country name="静海县" /> <country name="蓟县" /> </city> </province></address>
?