练习：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分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
随机推荐
- 关于 tlb 文件
来自:http://blog.csdn.net/lcl_data/article/details/7418387 tlb文件是什么?tlb文件是一个说明文件,通过TLB文件,用户可以得知你的DLL中的 ...
- Python之黏包
黏包现象 让我们基于tcp先制作一个远程执行命令的程序(命令ls -l ; lllllll ; pwd) res=subprocess.Popen(cmd.decode('utf-8'), shell ...
- Redis高并发和快速的原因
一.Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快: 2.redis是单线程的,省去了很多上下文切换线程的时间: 3.redis使用多路复用技术,可以处理并发的连接 ...
- 第十八节，TensorFlow中使用批量归一化(BN)
在深度学习章节里,已经介绍了批量归一化的概念,详情请点击这里:第九节,改善深层神经网络:超参数调试.正则化以优化(下) 神经网络在进行训练时,主要是用来学习数据的分布规律,如果数据的训练部分和测试部分 ...
- echarts map地图设置外边框或者阴影
geo: { map: 'china', center: [112.194115019531, 23.582111640625], zoom: 12, aspectScale: 1, //长宽比 la ...
- vue proxyTable 接口跨域请求调试
在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: requir ...
- JS事件（五）内存与性能
1.减少代码中事件处理程序的数量,是减少内存开销,提升网页速度的有效手段 事件委托: <ul id="ul"> <li id="goSomewhere& ...
- YII 框架在windows系统下的安装
第一步,下载yiii框架 http://www.yiichina.com 第二步安装: 1.首先需要下载应用模板,分为基础模板和高级应用模板,这里我以高级应用模板为例子 : 去这里现在高级应用模板 h ...
- keepalived+LVS实现网站负载均衡和HA
如上图所示,102和103是内网nginx服务器,100和101是边界LB,clinet是1,这个实验是为了实现在LB上虚拟出一个VIP,client通过访问该VIP,来动态负载到两台内网nginx服 ...
- django补充
通过表名获取app的name models.UserInfo._meta.app_label >>> from repository import models >>&g ...