练习：javascript弹出框及地址选择功能,可拖拽
<!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>
练习：javascript弹出框及地址选择功能,可拖拽的更多相关文章
- JavaScript 弹出框
JavaScript 有三种类型的弹出框:警告框.确认框和提示框. 警告框 如果要确保信息传递给用户,通常会使用警告框. 当警告框弹出时,用户将需要单击“确定”来继续. 语法 window.alert ...
- javascript弹出框打印某个数值时，弹出NaN？（not a number）
一.NaN:表示not a number null 未定义或空字符串 undefined 对象属性不存在 或是声明了变量但从未赋值. 二.出现这种情况有(1)此常数的值是零被零除所得到的结果. (2) ...
- JavaScript弹出框
confirm(str); 参数说明: str:在消息对话框中要显示的文本 返回值: Boolean值 返回值: 当用户点击"确定"按钮时,返回true 当用户点击"取消 ...
- JavaScript 弹出框:警告(alert)、确认(confirm)的简单写法
onclick="javascript:return window.confirm('message')"
- elementUI 弹出框添加可自定义拖拽和拉伸功能，并处理边界问题
开发完后台管理系统的弹出框模块,被添加拖拽和拉伸功能,看了很多网上成熟的帖子引到项目里总有一点问题,下面是根据自己的需求实现的步骤: 首先在vue项目中创建一个js文件eg:dialog.js imp ...
- Selenium2学习-040-JavaScript弹出框（alert、confirm、prompt）操作演示实例
弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...
- 转：WebDriver(Selenium2) 处理可能存在的JS弹出框
在自动化测试过程中,有些情况下我们会遇到一些潜在的Javascript弹出框.(即某些条件下才会出现,不是固定出现),然后如果当这种弹出框出现,我们没有加以处理,WebDriver将无法进行下一步的操 ...
- WebDriver(Selenium2) 处理可能存在的JS弹出框
http://uniquepig.iteye.com/blog/1703103 在自动化测试过程中,有些情况下我们会遇到一些潜在的Javascript弹出框.(即某些条件下才会出现,不是固定出现),然 ...
- 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
随机推荐
- css 选择符中的 >,+,~,=,^,$,*,|,:,空格 的意思
一,作为元素选择符 * 表示通配选择符 * {} // 所有元素 二,作为关系选择符 空格 表示包含选择符 a div{} // 被a元素包含的div > 表示子元素选择符 a > div ...
- 洛谷P4070 生成魔咒
题意:给定字符串,求每个前缀的本质不同的子串数量.字符集1e9. 解:在线构造后缀自动机并统计答案. 答案就是∑len[i] - len[fail[i]] 每次增加的时候,至多对三个节点有影响.然而把 ...
- 在 vue.js 中动态绑定 v-model
在最近的项目中(基于vue),有一个需求就是通过 v-for 动态生成 input.在正常情况下,页面中的input数量是固定的,而且每个input绑定的v-model也是固定的,我们可以在 data ...
- 2018-2019 ACM-ICPC, Asia Nanjing Regional Contest
https://codeforces.com/gym/101981 Problem A. Adrien and Austin 贪心,注意细节 f[x]=1:先手必赢. f[x]: 分成两部分(或一部分 ...
- 第十四节，TensorFlow中的反卷积，反池化操作以及gradients的使用
反卷积是指,通过测量输出和已知输入重构未知输入的过程.在神经网络中,反卷积过程并不具备学习的能力,仅仅是用于可视化一个已经训练好的卷积神经网络,没有学习训练的过程.反卷积有着许多特别的应用,一般可以用 ...
- 字符输入流 FileReader
package cn.lideng.demo3; import java.io.FileNotFoundException; import java.io.FileReader; public cla ...
- Map的嵌套
package cn.lijun.demo2; import java.util.HashMap; import java.util.Iterator; import java.util.Set; p ...
- sed 的|
#!/bin/bash/etc/init.d/nginx start && \sed -i "s|/project/env/|/${PROJ}/${ENVT}/|g" ...
- CactiEZ中文解决方案和使用教程
CactiEZ中文版是最简单有效的Cacti中文解决方案,整合Spine,RRDTool和美化字体.集成Thold,Monitor,Syslog,Weathermap,Realtime,Errorim ...
- JavaSE_坚持读源码_HashSet对象_Java1.7
对于 HashSet 而言,它是基于 HashMap 实现的,HashSet 底层采用 HashMap 来保存所有元素,因此 HashSet 的实现比较简单,查看 HashSet 的源代码,可以看到如 ...