<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript弹出框及地址选择功能,可拖拽</title> <style> *{margin:0;padding:0;} #container{width:400px;margin:50px auto;} #box{width:398px;border:1px solid #ccc;margin-top:20px;font-size: 13px;} #box-selected{padding:10px;} #moveable{cursor: move;background:#eee;} .title{background:#eee;padding: 5px;margin-bottom:10px;} label{margin-right:10px;} #popwin{font-size: 13px;width: 400px;border: 1px solid #000;height: 160px;z-index: 99999;background: #fff;position: absolute;top: 100px;display:none;} #selectd{padding-left:10px;} #close{float:right;} .win-title{border: 1px solid #eee;font-size: 13px;padding: 5px;} #select-content{margin-top:10px;} #select{height:71px;font-size: 13px;padding-left: 10px;margin-top: 10px;height: 60px;} #selected{height:71px;padding-left: 10px;padding-top: 10px;} #mask{opacity:0.4;background:gray;display:none;position: absolute;top: 0;position: absolute;} #close span{cursor: pointer;} </style> </head> <body> <div id="container"> <input type="button" id="btn" value="请选择"/> <div id="box"> <div class="win-title">您已选择的城市汇总</div> <div id="box-selected"></div> </div> </div> <div id="popwin"> <div class="win-title title" id="moveable">请选择城市 <div id="close"> <span id="btn-ok">[确定]</span> <span id="btn-cancel">[取消]</span> </div> </div> <div id="select"> <select name="" id="province"></select> <div name="" id="select-content"></div> </div> <div class="title">您已选择的城市 </div> <div id="selectd"></div> </div> <div id="mask"></div> <script> var aProvince =[ { name:'黑龙江', code:'heilongjiang', cities:[ {name:'哈尔滨',code:'haerbin',province:this}, {name:'牡丹江',code:'mudanjiang',province:this}, ] }, { name:'吉林', code:'jilin', cities:[ {name:'长春',code:'changcun',province:this}, {name:'吉林',code:'jilin',province:this}, ] }, ]; var oBtn = document.querySelector('#btn'); var oMask = document.querySelector('#mask'); var oPopwin = document.querySelector('#popwin'); var oBox =document.querySelector('#box'); var oBtnOk = document.querySelector('#btn-ok'); var oBtnCancel = document.querySelector('#btn-cancel'); var oMoveable =document.querySelector('#moveable'); var oSelect = document.querySelector('#province'); var oSelectContent = document.querySelector('#select-content'); var oSelectdContent =document.querySelector('#selectd'); var oboxSelected=document.querySelector('#box-selected'); //浏览器可视区宽高 var iWinWidth = document.documentElement.clientWidth; var iWinHeight = document.documentElement.clientHeight; var disx= disY = 0; oMoveable.onmousedown =function(e){ e = window.event||argument[0]; //鼠标距离oPopwin边框 disx = e.clientX-oPopwin.offsetLeft; disY = e.clientY-oPopwin.offsetTop; //按下之后在文档内拖动， document.onmousemove=function(e){ e = window.event||argument[0]; var l=e.clientX-disx; var t=e.clientY-disY; oPopwin.style.left =l+'px'; oPopwin.style.top =t+'px'; //判断left超出时靠边界, if(oPopwin.offsetLeft<0){ oPopwin.style.left =0+'px'; }else if(oPopwin.offsetLeft>(iWinWidth-oPopwin.offsetWidth)){ oPopwin.style.left =iWinWidth-oPopwin.offsetWidth+'px'; } //判断top超出时靠边界, if(oPopwin.offsetTop<0){ oPopwin.style.top =0+'px'; }else if(oPopwin.offsetTop>(iWinHeight-oPopwin.offsetHeight)){ oPopwin.style.top =iWinHeight-oPopwin.offsetHeight+'px'; } } //松开 document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; //自身也清空 } } //请选择 oBtn.onclick=function(){ showPopWin(); } //确定 oBtnOk.onclick=function(){ closePopWin(); oboxSelected.innerHTML=oSelectdContent.innerHTML; for(var i=0;i<oboxSelected.children.length;i++){ var elem =oboxSelected.children[i]; elem.firstChild.checked=true; } } //取消 oBtnCancel.onclick=function(){ closePopWin(); } function showPopWin(){ oMask.style.width = iWinWidth+'px'; oMask.style.height = iWinHeight+'px'; oMask.style.display= oPopwin.style.display='block'; //初始oPopwin的left,替代css,整个页面居中 oPopwin.style.left =(iWinWidth-oPopwin.offsetWidth)/2+'px'; for(var i = 0,opts='';i<aProvince.length;i++){ opts +='<option value='+aProvince[i].code+'>'+aProvince[i].name+'</option>'; // var oProvince =aProvince[i]; // var option = document.createElement('option'); // option.innerHTML = oProvince.name; // option.value = oProvince.code; // oSelect.append(option) } oSelect.innerHTML = opts; //上方初始化 for(var i = 0,ospts='';i<aProvince[0].cities.length;i++){ ospts += '<label value='+aProvince[0].cities[i].name+'><input type="checkbox" value='+aProvince[0].cities[i].name+'>'+aProvince[0].cities[i].name+'</label>'; } oSelectContent.innerHTML = ospts; //如果进入页有选中的内容 if(oboxSelected.children.length>0){ //判断进入页有没有选中内容，有上方也勾选 for(var i=0;i<oboxSelected.children.length;i++){ var elem =oboxSelected.children[i];//上边label var no = elem.firstChild; for(var j=0;j<oSelectContent.children.length;j++){ var elemd =oSelectContent.children[j];//下边label if(no.value==elemd.firstChild.value&&no.checked==false){ console.log('进入有选中，上边也选中！') console.log("---"+elemd.firstChild.value) elemd.firstChild.checked=false; }else if(no.value==elemd.firstChild.value&&no.checked==true){ elemd.firstChild.checked=true; } } } oSelectdContent.innerHTML=''; //判断初始进入前状态，同步下方内容状态 for(var i=0;i<oboxSelected.children.length;i++){ var elem =oboxSelected.children[i];//上边label // oSelectdContent.innerHTML=''; if(elem.firstChild.checked!=false){ var oLabel = elem; var oNew= oLabel.cloneNode(true);//克隆label oSelectdContent.appendChild(oNew); } } } //进入时判断上方有没有选中内容，上没有下也不勾选 if(oSelectContent.children.length>0){ for(var i=0;i<oSelectContent.children.length;i++){ var elem =oSelectContent.children[i];//上边label if(elem.firstChild.checked!=true){//没选中 for(var j=0;j<oSelectdContent.children.length;j++){ var elemd =oSelectdContent.children[j];//下边label if(elem.firstChild.value==elemd.firstChild.value){ console.log('这个没选中：'+elemd.firstChild) elemd.parentNode.removeChild(elemd) } } } } } } oSelect.onchange=function(){ //当前选中select索引下city var acity = aProvince[this.selectedIndex].cities; if(acity.length>0){ for(var i = 0,ainput='';i<acity.length;i++){ ainput += '<label value='+acity[i].name+'><input type="checkbox" value='+acity[i].name+'>'+acity[i].name+'</label>'; } oSelectContent.innerHTML = ainput; } //切换时上下有一样的，上边的选中 if(oSelectContent.children.length>0&&oSelectdContent.children.length>0){ for(var i=0;i<oSelectContent.children.length;i++){ var elem =oSelectContent.children[i];//上边label for(var j=0;j<oSelectdContent.children.length;j++){ var elemd =oSelectdContent.children[j];//下边label if(elem.firstChild.value==elemd.firstChild.value){ // console.log('切换时上下有一样的，上边的选中！') elem.firstChild.checked=true; } } } } //判断下方有没有初始化的选中内容，有上方也勾选 for(var i=0;i<oSelectContent.children.length;i++){ var elem =oSelectContent.children[i];//上边label for(var j=0;j<oSelectdContent.children.length;j++){ var elemd =oSelectdContent.children[j];//下边label if(elem.firstChild.value==elemd.firstChild.value){ // console.log('下有的，上边的选中！') elem.firstChild.checked=true; } } } //切换时判断oboxSelected中的状态,外层没选中，里边也不选中 if(oboxSelected.children.length>0){//有数据时 for(var i=0;i<oboxSelected.children.length;i++){ var elem = oboxSelected.children[i]; if(elem.firstChild.checked!=true){ for(var j=0;j<oSelectContent.children.length;j++){ var elemd =oSelectContent.children[j];//下边label if(elem.firstChild.value==elemd.firstChild.value&&elem.firstChild.checked==false){ elemd.firstChild.checked=false; } } } } //进入时判断上方有没有选中内容，上没有下也不勾选 if(oSelectContent.children.length>0){ for(var i=0;i<oSelectContent.children.length;i++){ var elem =oSelectContent.children[i];//上边label if(elem.firstChild.checked!=true){//没选中 for(var j=0;j<oSelectdContent.children.length;j++){ var elemd =oSelectdContent.children[j];//下边label if(elem.firstChild.value==elemd.firstChild.value){ console.log('这个没选中：'+elemd.firstChild) elemd.parentNode.removeChild(elemd) } } } } } } } function closePopWin(){ oMask.style.display=oPopwin.style.display='none'; } //利用事件冒泡为checkbox注册单击事件 oSelectContent.onclick=function(e){ e = window.e||e; var oTarget=e.srcElement||e.target; //选中从添加下方 if(oTarget.tagName=='INPUT' &&oTarget.checked==true){ //标识，上方选中才添加下方内容 var bflag=true; //判断下方有没有 for(var i=0;i<oSelectdContent.children.length;i++){ //console.log(oTarget.value) var elem =oSelectdContent.children[i];//上边label if(oTarget.value==elem.firstChild.value){ //上选中且与下value相同时，下也选中 elem.firstChild.checked=true; bflag=false; break;//下方不执行 } } if(bflag==true){ var oLabel = oTarget.parentNode; var oNew= oLabel.cloneNode(true);//克隆label oSelectdContent.appendChild(oNew); } }else { //上边没选中时下方移除 for(var i=0;i<oSelectdContent.children.length;i++){ var elem =oSelectdContent.children[i];//上边label if(oTarget.value==elem.firstChild.value){//上边label.value与当前label.value elem.parentNode.removeChild(elem); } } } } oSelectdContent.onclick=function(e){ e = window.e||e; var oTarget=e.srcElement||e.target; if(oTarget.tagName=='INPUT'){ var oLabel = oTarget.parentNode; oLabel.parentNode.removeChild(oLabel);//父节点.removeChild(子节点) for(var i=0;i<oSelectContent.children.length;i++){ var elem =oSelectContent.children[i];//上边label if(elem.firstChild.value==oTarget.value){//上边label.value与当前label.value elem.firstChild.checked=false; } } } } </script> </body> </html>