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 ...
随机推荐
- ACCESS的参数化查询
看论坛上还许多人问及ACCESS被注入的安全问题许多人解决的方法仍然是用Replace替换特殊字符,然而这样做也并没有起到太大做用今天我就把我用ACCESS参数化查询的一些方法和经验和大家分享希望对大 ...
- 客户端(Winform窗体）上传文件到服务器（web窗体）简单例子
客户端:先创建一个winform窗体的应用程序项目 项目结构
- 与众不同 windows phone (38) - 8.0 关联启动: 使用外部程序打开一个文件或URI, 关联指定的文件类型或协议
[源码下载] 与众不同 windows phone (38) - 8.0 关联启动: 使用外部程序打开一个文件或URI, 关联指定的文件类型或协议 作者:webabcd 介绍与众不同 windows ...
- 与众不同 windows phone (47) - 8.0 其它: 锁屏信息和锁屏背景, 电池状态, 多分辨率, 商店, 内置协议, 快速恢复
[源码下载] 与众不同 windows phone (47) - 8.0 其它: 锁屏信息和锁屏背景, 电池状态, 多分辨率, 商店, 内置协议, 快速恢复 作者:webabcd 介绍与众不同 win ...
- Web网站数据”实时”更新设计
请注意这个实时打上了双引号,没有绝对的实时,只是时间的颗粒不一样罢了(1ms,1s,1m). 服务器数据有更新可以快速通知客户端.Web 基于取得模式,而服务器建立大量的和客户端连接来提供数据实时更新 ...
- 高效构建Web应用 教你玩转Play框架 http://www.anool.net/?p=577
Play 框架是一个完整的Web应用开发框架,覆盖了Web应用开发的各个方面.Play 框架在设计的时候借鉴了流行的 Ruby on Rails 和 Grails 等框架,又有自己独有的优势.使用 P ...
- Ansible用于网络设备管理 part 1 Jinja2 YAML初窥
这一次的实验内容依然来自Kirk Byers的博客,源地址在https://pynet.twb-tech.com/blog/python/paramiko-ssh-part1.html 但是,这次实验 ...
- mongodb 基本指令学习 （2）
db.collectionname.find(<criteria>, <projection>) <criteria> 可选 类型 文档 文档的过滤条 ...
- 浅谈ES6中的Proxy
Proxy是一个很有趣的对象,它能够修改某些操作的默认行为,等同于在语言层面做出修改,属于一种‘元编程’,即对编程语言进行编程. Proxy其实很好理解,就是在目标对象之前架设一层拦截,外界的访问都得 ...
- Convert part to feature command
Search 库主页 Related Links ArcObjects SDK for ArcGIS 10Microsoft Help System Documentation Convert par ...