<ptml xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content= "text/" html charset=gb2312 "/> <title> address selection with 51job effect </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;p osition: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> </pead> <body> <div id= "main" > <input name= "button" type= "button" class= "b ton pointer value= Please select onclick= OPENBG (1); Openselect (1) /> <div id= result > <div class= bgc_eee > <p> you have selected City summary </p> </div> <div class= "cont" id= "Makesureitem" > </div> </div> ; </div> <div id= bg > </div> <div id= SelectItem class= hidden > <div class= BGC_CCC m Ove "onmousedown=" Drag (event,this) "> <p class=" left "> Please select City </p> <span class=" pointer right " onclick= "OPENBG (0); openselect (0);" >[cancels]</span> <span class= "pointer right" onclick= "makesure ();" >[OK]</span> </div> <div class= "CLS" ></div> <div class= "cont" > <div id= "selectsub" "> <select name=" "onchange=" Showselect (this. Value) "> <option value=" 0 "> No. 0 Floor </option> <option value=" 1 "> 1th level </option> <option value= "2" > 2nd floor </option> <option value= "3" > 3rd level </option> </select> <div id= "c00" > <input t ype= "checkbox" Name= "ck00" onclick= "Addpreitem ()" value= "Beijing/> Beijing <input type=" checkbox "Name=" ck00 "onclick=" Addpreitem () "value=" "Fujian"/> Fujian <input type= "checkbox" Name= "ck00" onclick= "Addpreitem ()" value= "Sichuan"/> Sichuan < Input type= "checkbox" Name= "ck00" onclick= "Addpreitem ()" value= "Jiangsu"/> Jiangsu </div> <div id= "C01" > <input type= "checkbox" Name= "Ck01" onclick= "Addpreitem ()" value= "Shanghai"/> Shanghai <input type= "checkbox" Name= "Ck01" onclick= " Addpreitem () "value=" Yunnan "/> Yunnan <input type=" checkbox "Name=" Ck01 "onclick=" Addpreitem () "value=" Guizhou "/> Guizhou </ div> <div id= "C02" > <input type= "checkbox" Name= "Ck01" onclick= "Addpreitem ()" value= "Heilongjiang"/> Heilongjiang <inpu T type= "checkbox" Name= "Ck01" onclick= "AddpreiteM () "value=" Jilin "/> Jilin <input type=" checkbox "Name=" Ck01 "onclick=" Addpreitem () "value=" Liaoning "/> Liaoning </div> ;d IV id= "C03" > <input type= "checkbox" Name= "Ck01" onclick= "Addpreitem ()" Value= "USA"/> USA <input type= " CheckBox "Name=" Ck01 "onclick=" Addpreitem () "value=" Afghanistan "/> Afghanistan <input type=" checkbox "Name=" Ck01 "onclick=" Addpreitem () Value= Japan /> Japan </div> </div> </div> <div id= Preview > <div class= b Gc_eee c_999 "> <p> you have selected city </p> </div> <div class=" cont "id=" Previewitem "> </div> &L t;/div> </div> <script type= "Text/javascript" >/*------Use INSTRUCTIONS-----/* Add City Method: Add Group: Find ID is "selects UB "Under the Select tab, add option Label Value property increment, find ID is" selectsub ", add div in original format, add the id attribute increment two FU beneficiation option the copy ID is any input label under" Selectsub ", pasted on the The location to add. * * var grow = $ ("Selectsub"). getElementsByTagName ("option"). Length; Group number var showgrow = 0;//opened group var selectcount = 0; Selected quantity Showselect (Showgrow); VaR items = $ ("Selectsub"). getElementsByTagName ("input"); function $ (o) {//Get object if (typeof (o) = = "string") return document.getElementById (O); return o; function OPENBG (state) {//Matte turn off control if (state = = 1) {$ (' bg '). Style.display = "block"; var h = document.body.offsetHeight > Document.documentElement.offsetHeight? Document.body.offsetHeight:document.documentElement.offsetHeight; $ ("BG"). Style.height = h + "px"; else {$ ("bg"). Style.display = "None"; } function Openselect (state) {//Select City Layer shutdown open Control if (state = = 1) {$ (' SelectItem '). Style.display = "block"; $ ("SelectItem"). Style.left = ($ ("BG"). Offsetwidth-$ ("SelectItem"). offsetwidth)/2 + "px"; $ ("SelectItem"). Style.top = Document.body.scrollTop + + "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) {//Show hidden controlif (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) {var mes = "<input type= ' checkbox ' Check" Ed= ' true ' value= ' "+ items[i].value +" ' onclick= ' CopyItem (\ "previewitem\", \ "previewitem\"); same (this); ' > "+ items[i].value; $ ("Previewitem"). InnerHTML = mes; }} 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 ' Checke D= ' true ' value= ' "+ items2[i].value +" ' onclick= ' CopyItem (\ "" + id2+ "\", \ "" + id1 + "\"); Same (tHis); ' > "+ items2[i].value; } $ (ID2). InnerHTML = ""; $ (ID2). InnerHTML = mes; } function Same (CK) {for (var i = 0; i < items.length; i++) {if (Ck.value = = Items[i].value) {items[i].checked = ck.checked; }}/* Mouse drag/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; DX = parseint ($ (Odrag). Style.left); DY = parseint ($ (Odrag). Style.top); 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> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
