练习：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分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
随机推荐
- 百度地图API示例：使用vue添加删除覆盖物
1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...
- 洛谷P4363 一双木棋 chess
洛谷P4363 一双木棋 chess 省选最水的一道题了. 且看我数个月AC一道题...... 具体是这样的:我们发现这个下了棋的地方一定形成一个锯齿形,那么怎么状态压缩呢? 维护轮廓线! 从左下角出 ...
- [luogu4309][最长上升子序列]
题目链接 思路 因为这些数字是从小到大加进去的,所以以当前数字结尾的最长上升子序列可以从前面位置的任何一个数字转移过来.所以只要能知道每个数字最终位于哪个位置就行了. 没想到出了treap还有什么办法 ...
- 关于json_encode转数组为json对象时里有数组格式数据的问题
前言:这次是给一款小程序提供接口时发现的 别的不多说,下面直接看出现问题的json数据 可以看到,这是一个大的json对象,是由多维数组组成,一般api接口提供的也是这种格式. 但是仔细看红框中的内容 ...
- javascript 实现页面显示当前时间 动态读秒
用户进入网站后,出于友好目的,可以添加一些欢迎语句,并且显示系统当前时间,动态读秒的操作.还是直接粘贴代码吧 <script type="text/javascript"&g ...
- Gym102082 G-What Goes Up Must Come Down(树状数组）
Several cards with numbers printed on them are lined up on the table. We’d like to change their orde ...
- php中函数里面使用函数外面的变量
一定要在函数里面声明为全局变量!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!(不然会有问题,还是不报错的那种)
- String 类中的几个练习--获取指定字符串中，大写字母、小写字母、数字的个数||获取一个字符串中,另一个字符串出现的次数
package cn.homework.demo1; public class GetCount { /* * 获取一个字符串中,另一个字符串出现的次数 * 思想: * 1. indexOf到字符串中 ...
- Shell 同步时间脚本
Linux系统同步时间脚本 Linux操作系统,如果时间和网络时间差距太大的话.可能会导致程序,进程启动不了.所以linux系统时间同步显得尤为重要,本文在借鉴网上众多资料后,以centos_6.X系 ...
- 剑指Offer_编程题_7
题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项. n<=39 class Solution { public: int Fibonacci(int n) ...