html点击按钮弹出多选择窗口级联下拉复选

参考代码

代码示例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点击按钮弹出多选择窗口级联下拉复选的更多相关文章

PyQt（Python+Qt）学习随笔：在一个窗口点击按钮弹出另一个窗口的实现方法及注意事项
在Qt Designer中定义了两个窗口,一个主窗口一个弹出窗口,需要实现在主窗口点击一个按钮时弹出弹出窗口. 经老猿验证: 1.弹窗的窗口类型无特殊要求,只要是QWidget等窗口部件就可以,也可以 ...
ExtJs 4.2.1 点击按钮弹出表单的窗口
初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...
JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用
请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...
Html ：点击按钮弹出输入框，再次点击进行隐藏
上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
jquery点击按钮弹出图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
jquery实现点击按钮弹出层和点击空白处隐藏层
昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){ $('.autoBtn' ...
Asp.net点击按钮弹出文件夹选择框的实现（网页）
本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...
js实现点击按钮弹出上传文件的窗口
转自:https://www.jb51.net/article/100916.htm 1.详细描述在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...

随机推荐

.NET生成缩略图并下载
缩略图:比喻一张图片宽度为1000px,大小为800K,经过缩略后变成一张宽度100px,大小10K的图片. 先给出界面: 总体的流程分5步如下图: 1.添加一个html:GetminPic.html ...
分享一个Winform里面的HTML编辑控件Zeta HTML Edit Control，汉化附源码
我们知道,Web开发上有很多HTML的编辑控件,如FCKEditor.CKEditor.kindeditor等等,很多都做的很好,而虽然Winform里面有WebBrowser控件,但是默认这个控件是 ...
C语言中有bool类型吗？
之前一直都没有注意到,最近在用C语言写DSP算法时,偶然间发现我函数中定义的bool类型的变量在VC6.0(我主要用它来检查一下语法错误)中编译居然报错了,说是bool类型没有定义.用了这么久的C和C ...
iOS开发之蓝牙通讯
iOS开发之蓝牙通讯一.引言蓝牙是设备近距离通信的一种方便手段,在iPhone引入蓝牙4.0后,设备之间的通讯变得更加简单.相关的蓝牙操作由专门的CoreBluetooth.framework进行 ...
jQuery数据类型总结
jQuery除了包含原生JS中的内置数据类型(built-in datatype),还包括一些扩展的数据类型(virtual types),如Selectors.Events等. 1. String ...
WCF使用泛型方法的问题
public IList getModelList(string type, string SQL, List<string> list){ try { IList Mlist = new ...
基于bootstrap的图片轮播效果展示
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
Docker on CentOS for beginners
Introduction The article will introduce Docker on CentOS. Key concepts Docker Docker is the world's ...
【iOS】通知监听
下例为:监听文本框 accountField 内容的改变, 当发生改变时, 调用textChange方法(多次).监听结束需要移除通知. - (void)viewDidLoad { [super ...
[Xamarin.Android] ActionBar Tips
[Xamarin.Android] ActionBar Tips ActionBar用途快速搞懂 ActionBar的用途,可以参考下列文章: [Android]使用 ActionBarCompat ...

html点击按钮 弹出 多选择窗口级联下拉复选

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

随机推荐

热门专题

html点击按钮弹出多选择窗口级联下拉复选

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