参考代码

代码示例1：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>原生js点击弹出多个城市选择框代码 - 站长素材</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;position:absolute;top:0px;left:center;border:1px solid #;overflow:hidden;margin-top:10px;width:400px;z-index:;}

 #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:#}

 .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=);opacity:0.7;width:%;;position:absolute;left:0px;top:0px;display:none;z-index:;}

 .hidden{display:none;}

 .move{cursor:move;}

 </style>

 </head>

 <body>

 <div id="main">

     <input name="button" type="button" class="bton pointer" value="请选择" onclick="openBg(1);openSelect(1)"/>

     <div id="result">

         <div class="tit bgc_eee">

             <h2>您已选择的城市汇总</h2>

         </div>

         <div class="cont" id="makeSureItem"></div>

     </div>

 </div>

 <div id="bg"></div>

 <div id="selectItem" class="hidden">

     <div class="tit bgc_ccc move" onmousedown="drag(event,this)">

         <h2 class="left">请选择城市</h2>

         <span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span>

         <span class="pointer right" onclick="makeSure();">[确定]</span>

     </div>

     <div class="cls"></div>

     <div class="cont">

         <div id="selectSub">

             <select name="" onchange="showSelect(this.value)" style="margin-bottom:10px;">

                 <option value="">第0层</option>

                 <option value="">第1层</option>

                 <option value="">第2层</option>

                 <option value="">第3层</option>

             </select>

             <div id="c00">

                 <input type="checkbox" name="ck00" onclick="addPreItem()" value="北京"/>北京

                 <input type="checkbox" name="ck00" onclick="addPreItem()" value="福建"/>福建

                 <input type="checkbox" name="ck00" onclick="addPreItem()" value="四川"/>四川

                 <input type="checkbox" name="ck00" onclick="addPreItem()" value="江苏"/>江苏

             </div>

             <div id="c01">

                 <input type="checkbox" name="ck01" onclick="addPreItem()" value="上海"/>上海

                 <input type="checkbox" name="ck01" onclick="addPreItem()" value="云南"/>云南

                 <input type="checkbox" name="ck01" onclick="addPreItem()" value="贵州"/>贵州

             </div>

             <div id="c02">

                 <input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龙江"/>黑龙江

                 <input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林"/>吉林

                 <input type="checkbox" name="ck01" onclick="addPreItem()" value="辽宁"/>辽宁

             </div>

             <div id="c03">

                 <input type="checkbox" name="ck01" onclick="addPreItem()" value="美国"/>美国

                 <input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗"/>阿富汗

                 <input type="checkbox" name="ck01" onclick="addPreItem()" value="日本"/>日本

             </div>

         </div>

     </div>

     <div id="preview">

         <div class="tit bgc_eee c_999">

             <h2>您已选择的城市</h2>

         </div>

         <div class="cont" id="previewItem"></div>

     </div>

 </div>

 <div style="height:500px;"></div>

 <script type="text/javascript">

 /* ------使用说明----- */

 /*

  添加城市方法：

      添加组：找到id 是 "selectSub"中select标签下，添加option标签 value属性递增，找到 id 是 "selectSub",按照原有格式添加div,其id属性递增

  添加二级傅选矿选项

   复制 id 是 "selectSub" 下任意input标签，粘贴在需要添加的位置。

 */

 var grow = $("selectSub").getElementsByTagName("option").length; //组数

 var showGrow = ;//已打开组

 var selectCount = ; //已选数量

 showSelect(showGrow);

 var items = $("selectSub").getElementsByTagName("input");

 //alert(maxItem);

 //var lenMax = 2;

 //alert(1);

 function $(o){ //获取对象

  if(typeof(o) == "string")

  return document.getElementById(o);

  return o;

 }

 function openBg(state){ //遮照打开关闭控制

  if(state == )

  {

   $("bg").style.display = "block";

   var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;

  //alert(document.body.offsetHeight);

  //alert(document.documentElement.offsetHeight);

   $("bg").style.height = h + "px";

  }

  else

  {

   $("bg").style.display = "none";

  }

 }

 function openSelect(state){ //选择城市层关闭打开控制

  if(state == )

  {

   $("selectItem").style.display = "block";

   $("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/ + "px";

   $("selectItem").style.top = document.body.scrollTop +  + "px";

  }

  else

  {

   $("selectItem").style.display = "none";

  }

 }

 function showSelect(id){

  for(var i =  ; i < grow ;i++)

  {

   $("c0" + i).style.display = "none";

  }

  $("c0" + id).style.display = "block";

  showGrow = id;

 }

 function open(id,state){ //显示隐藏控制

  if(state == )

  $(id).style.display = "block";

  $(id).style.diaplay = "none";

 }

 function addPreItem(){

  $("previewItem").innerHTML = "";

  var len　=  ;

  for(var i =  ; i < items.length ; i++)

  {

   if(items[i].checked == true)

   {

    //len++;

    //if(len > lenMax)

    //{

    // alert("不能超过" + lenMax +"个选项！")

    // return false;

    //}

    var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>" + items[i].value;

    $("previewItem").innerHTML += mes;

    //alert(items[i].value);

   }

  }

 }

 function makeSure(){

  //alert(1);

  //$("makeSureItem").innerHTML = $("previewItem").innerHTML;

  openBg();

  openSelect();

  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 =  ; i < items2.length ; i++)

  {

   if(items2[i].checked == true)

   {

    mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem(\"" + id2+ "\",\""+ id1 +"\");same(this);'>" + items2[i].value;

   }

  }

  $(id2).innerHTML = "";

  $(id2).innerHTML += mes;

  //alert($(id2).innerHTML);

 }

 function same(ck){

  for(var i =  ; i < items.length ; i++)

  {

   if(ck.value == items[i].value)

   {

    items[i].checked = ck.checked;

   }

  }

 }

 /* 鼠标拖动 */

 var oDrag = "";

 var ox,oy,nx,ny,dy,dx;

 function drag(e,o){

  var e = e ? e : event;

  var mouseD = document.all ?  : ;

  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;

   //$(oDrag).style.left = $(oDrag).offsetLeft + "px";

   //$(oDrag).style.top = $(oDrag).offsetTop + "px";

   dx = parseInt($(oDrag).style.left);

   dy = parseInt($(oDrag).style.top);

   //dx = $(oDrag).offsetLeft;

   //dy = $(oDrag).offsetTop;

   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>

 <div style="text-align:center;margin:0px 0; font:normal 14px/24px 'MicroSoft YaHei';">

 <p>适用浏览器：IE8、、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>

 <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>

 </div>

 </body>

 </html>

效果：

    

代码示例2：

参考代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>下拉框</title>

 <style type="text/css">

   .tab{width:500px;height:300px;border:1px solid #CCF ;}

   .menu{width:480px;padding-top:50px;padding-left:50px;}

   select{width:200px;height:50px;}

    ul{padding:0;margin:0;}

   .list{width:320px;height:80px;;border:1px solid #CCC;margin:5px 0 0 138px;padding:10px 20px 10px 10px;display:none;}

    li{list-style:none;}

    .list ul li a{height:30px;float:left;width:80px;text-decoration: none;color:gray;}

 </style>

 <script>

   window.onload = function(){

        var oSelect = document.getElementsByTagName('select')[0];

        var oDiv = document.getElementById('list');

        oSelect.onclick = function(){

            if(this.value=="卡牌游戏"){

                 oDiv.style.display="block";

                }else{

                  oDiv.style.display="none";

                  }

            };

       };

 </script>

 </head>

 <body>

    <div class="tab">

    <div class="menu">

     <span>游戏类型：</span>

      <select>

        <option>手机游戏</option>

        <option>梦幻西游</option>

         <option>卡牌游戏</option>

      </select>

     </div>

      <div class="list" id="list">

        <ul>

           <li><a href="javascript:;">动作游戏</a></li>

           <li><a href="javascript:;">动作游戏</a></li>

           <li><a href="javascript:;">动作游戏</a></li>

           <li><a href="javascript:;">动作游戏</a></li>

           <li><a href="javascript:;">动作游戏</a></li>

            <li><a href="javascript:;">动作游戏</a></li>

           <li><a href="javascript:;">动作游戏</a></li>

           <li><a href="javascript:;">动作游戏</a></li>

           <li><a href="javascript:;">动作游戏</a></li>

           <li><a href="javascript:;">动作游戏</a></li>

        </ul>

      </div>

    </div>

 </body>

 </html>

html点击按钮 弹出 多选择窗口级联下拉复选的更多相关文章

  1. PyQt（Python+Qt）学习随笔：在一个窗口点击按钮弹出另一个窗口的实现方法及注意事项

    在Qt Designer中定义了两个窗口,一个主窗口一个弹出窗口,需要实现在主窗口点击一个按钮时弹出弹出窗口. 经老猿验证: 1.弹窗的窗口类型无特殊要求,只要是QWidget等窗口部件就可以,也可以 ...

  2. ExtJs 4.2.1 点击按钮弹出表单的窗口

    初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...

  3. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  4. 请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  5. Html ： 点击按钮弹出输入框，再次点击进行隐藏

    上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  8. Asp.net点击按钮弹出文件夹选择框的实现（网页）

    本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...

  9. js实现点击按钮弹出上传文件的窗口

    转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...

随机推荐

  1. 译：在ASP.NET MVC5中如何使用Apache log4net 类库来记录日志

    译文出处:http://www.codeproject.com/Articles/823247/How-to-use-Apache-log-net-library-with-ASP-NET-MVC 在 ...

  2. C#实战Microsoft Messaging Queue(MSMQ)消息队列(干货)

    前言 在使用MSMQ之前,我们需要自行安装消息队列组件!(具体安装方法大家自己搜一下吧) 采用MSMQ带来的好处是:由于是异步通信,无论是发送方还是接收方都不用等待对方返回成功消息,就可以执行余下的代 ...

  3. 设计模式--中介(Mediator)模式

    时隔很长一段时,现在又重温设计模式,上个星期学习<设计模式--代理(Proxy)模式>http://www.cnblogs.com/insus/p/4128814.html. 温故而知新, ...

  4. bootstrap布局 网格系统

    Bootstrap 网格系统 本章节我们将讲解 Bootstrap 的网格系统(Grid System). Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewp ...

  5. 【转】 StringUtils中 isNotEmpty 和isNotBlank的区别

    [转自]http://blog.csdn.net/foamflower/article/details/5713604 isNotEmpty将空格也作为参数,isNotBlank则排除空格参数 Str ...

  6. SFTP和FTS协议的区别

    都是为FTP连接加密,协议非常相似.一个是借助SSL协议加密,一个时借助SSH协议加密.SSL是为HTTP/SMTP等加密设计的:SSH是为TELNET/FTP等加密.建立传输通道而设计的.其实SSH ...

  7. mysql并发insert deadlock分析以及解决，无delete/update/for update

    关于并发insert操作发生deadlock这个情况,一直有很多争议,而且网上的帖子所有的例证和模拟其实不一定反映了真实的情况,例如:https://www.percona.com/blog/2012 ...

  8. 开启Windows Server 2008 R2上帝模式

    TAG标签: 摘要:这个“God Mode” 应该大部分的网友都听过了,只是在 Windows Server 2008 R2 上也支持此一功能.启用方式非常简单,在桌面新建一个文件夹,命名为: God ...

  9. CSS3边框温故

    1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px( ...

  10. http服务&ajax编程

    http服务&ajax编程 1.服务器 前言:通俗的讲,能够提供某种服务的机器(计算机)称为服务器 1.1.服务器类型 按照不同的划分标准,服务可划分为以下类型: 按服务类型可分为:文件服务器 ...