<!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>练习弹出窗传值3</title>
<meta name="description" content="" />
</head><body><style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#5e5e5e;font-size:12px;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/* nav_menu */
.nav_menu{width:560px;margin:100px auto;}
.nav_menu dl{background:url(images/verline.gif) repeat-y 4px 0;}
.nav_menu dl dt a{height:24px;line-height:24px;overflow:hidden;color:#3366cc;font-weight:800;}
.nav_menu dl dt a span{display:inline-block;width:13px;height:15px;overflow:hidden;float:left;margin:0 5px 0 0;}
.nav_menu dl dt a.minus span{background:url(images/showbtn.gif) no-repeat;}
.nav_menu dl dt a.plus span{background:url(images/hidebtn.gif) no-repeat;}
.nav_menu dl dd li{height:24px;line-height:24px;background:url(images/lineleft.gif) no-repeat 4px -6px;padding:0 0 0 18px}
</style><script type="text/javascript">
function getObject(objectId){
if(document.getElementById && document.getElementById(objectId)){
return document.getElementById(objectId);
}else if(document.all && document.all(objectId)){
return document.all(objectId);
}else if(document.layers && document.layers[objectId]){
return document.layers[objectId];
}else{
return false;
}
}function showHide(e,objname){
var obj = getObject(objname);
if(obj.style.display == "none"){
obj.style.display = "block";
e.className="minus";
}else{
obj.style.display = "none";
e.className="plus";
}
}
</script>
<div class="crmnewbns">
<ul class="bns-list">
<li class="list-content">
<input type="text" id="txt" name="txt" readonly />
<!--列表1-->
<div class="nav_menu" id="list1">
<dl>
<dt><a href="javascript:void(0);" class="minus" onclick="showHide(this,'items0');"><span></span>一级菜单1</a></dt>
<dd id="items0">
<ul>
<li><a href="">二级菜单1</a></li>
<li><a href="">二级菜单2</a></li>
<li><a href="">二级菜单3</a></li>
<li><a href="">二级菜单4</a></li>
<li><a href="">二级菜单5</a></li>
<li><a href="">二级菜单6</a></li>
<li><a href="">二级菜单7</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:void(0);" class="plus" onclick="showHide(this,'items1');"><span></span>一级菜单2</a></dt>
<dd id="items1" style="display:none;">
<ul>
<li><a href="">二级菜单1</a></li>
<li><a href="">二级菜单2</a></li>
<li><a href="">二级菜单3</a></li>
<li><a href="">二级菜单4</a></li>
<li><a href="">二级菜单5</a></li>
<li><a href="">二级菜单6</a></li>
<li><a href="">二级菜单7</a></li>
</ul>
</dd>
</dl>
</div>
</li>
</ul>
</div>
</body>
</html>点击input弹出 <div class="nav_menu" id="list1">树型菜单，选择二级分类后把值传给input。
纠结了很久没现实
<!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>练习弹出窗传值3</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#5e5e5e;font-size:12px;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/* nav_menu */
.nav_menu{width:560px;margin:100px auto;}
.nav_menu dl{background:url(images/verline.gif) repeat-y 4px 0;}
.nav_menu dl dt a{height:24px;line-height:24px;overflow:hidden;color:#3366cc;font-weight:800;}
.nav_menu dl dt a span{display:inline-block;width:13px;height:15px;overflow:hidden;float:left;margin:0 5px 0 0;}
.nav_menu dl dt a.minus span{background:url(images/showbtn.gif) no-repeat;}
.nav_menu dl dt a.plus span{background:url(images/hidebtn.gif) no-repeat;}
.nav_menu dl dd li{height:24px;line-height:24px;background:url(images/lineleft.gif) no-repeat 4px -6px;padding:0 0 0 18px}
</style>
<script type="text/javascript">
function getObject(objectId){
if(document.getElementById && document.getElementById(objectId)){
return document.getElementById(objectId);
}else if(document.all && document.all(objectId)){
return document.all(objectId);
}else if(document.layers && document.layers[objectId]){
return document.layers[objectId];
}else{
return false;
}
}
function showHide(e,objname){
var obj = getObject(objname);
if(obj.style.display == "none"){
obj.style.display = "block";
e.className="minus";
}else{
obj.style.display = "none";
e.className="plus";
}
}function doclickInput(){
var menu = getObject("list1");
if(menu.style.visibility != "visible"){
menu.style.visibility = "visible";
}
}function doclickA(elem){
var txt = elem.innerHTML;
var input = getObject("txt");
input.value = txt;
}return;window.onload = function init(){
var arr = [getObject("items0"), getObject("items1")]; // 遍历两个dd里的所有a标签, 为其加上onclick事件
for(var i=0; i<arr.length; i++){
var dd = arr[i];
var as = dd.getElementsByTagName("a");
for(var j=0; j<as.length; j++){
as[j].onclick = function(){doclickA(this);}
}
}
}
</script>
<div class="crmnewbns">
<ul class="bns-list">
<li class="list-content">
<input type="text" id="txt" name="txt" onClick="doclickInput()" />
<!--列表1-->
<div class="nav_menu" id="list1">
<dl>
<dt><a href="javascript:void(0);" class="minus" onclick="showHide(this,'items0');"><span></span>一级菜单1</a></dt>
<dd id="items0">
<ul>
<li><a href="#" onClick="doclickA(this)">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
<li><a href="#">二级菜单5</a></li>
<li><a href="#">二级菜单6</a></li>
<li><a href="#">二级菜单7</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:void(0);" class="plus" onclick="showHide(this,'items1');"><span></span>一级菜单2</a></dt>
<dd id="items1" style="display:none;">
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
<li><a href="#">二级菜单5</a></li>
<li><a href="#">二级菜单6</a></li>
<li><a href="#">二级菜单7</a></li>
</ul>
</dd>
</dl>
</div>
</li>
</ul>
</div>
</body>
</html>
1. 在<a>标签中添加事件, 用于实现input的赋值方法; (doclickA)方法
2. 注释掉return; window.onload时自动为所有的<a>标签添加事件. lz体会一下
如果点击后<a href="#"></a>传值后并隐藏<div class="nav_menu" id="list1">，是不是在as[j].onclick = function(){doclickA(this);后加上style.display="none"?
menu.style.display = "none";
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>练习弹出窗传值3</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#5e5e5e;font-size:12px;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/* nav_menu */
.nav_menu{width:560px;margin:100px auto;}
.nav_menu dl{background:url(images/verline.gif) repeat-y 4px 0;}
.nav_menu dl dt a{height:24px;line-height:24px;overflow:hidden;color:#3366cc;font-weight:800;}
.nav_menu dl dt a span{display:inline-block;width:13px;height:15px;overflow:hidden;float:left;margin:0 5px 0 0;}
.nav_menu dl dt a.minus span{background:url(images/showbtn.gif) no-repeat;}
.nav_menu dl dt a.plus span{background:url(images/hidebtn.gif) no-repeat;}
.nav_menu dl dd li{height:24px;line-height:24px;background:url(images/lineleft.gif) no-repeat 4px -6px;padding:0 0 0 18px}
</style>
<script type="text/javascript">
function getObject(objectId){
if(document.getElementById && document.getElementById(objectId)){
return document.getElementById(objectId);
}else if(document.all && document.all(objectId)){
return document.all(objectId);
}else if(document.layers && document.layers[objectId]){
return document.layers[objectId];
}else{
return false;
}
}
function showHide(e,objname){
var obj = getObject(objname);
if(obj.style.display == "none"){
obj.style.display = "block";
e.className="minus";
}else{
obj.style.display = "none";
e.className="plus";
}
}function doclickInput(){
getObject("list1").style.display=getObject("list1").style.display=="none"?"":"none";
}function doclickA(elem){
var txt = elem.innerHTML;
var input = getObject("txt");
input.value = txt;
document.getElementById("list1").style.display = "none";
}
window.onload = function init(){
var arr = [getObject("items0"), getObject("items1")]; // 遍历两个dd里的所有a标签, 为其加上onclick事件
for(var i=0; i<arr.length; i++){
var dd = arr[i];
var as = dd.getElementsByTagName("a");
for(var j=0; j<as.length; j++){
as[j].onclick = function(){doclickA(this);}
}
}
}
</script>
<div class="crmnewbns">
<ul class="bns-list">
<li class="list-content">
<input type="text" id="txt" name="txt" onClick="doclickInput()" />
<!--列表1-->
<div class="nav_menu" id="list1">
<dl>
<dt><a href="javascript:void(0);" class="minus" onclick="showHide(this,'items0');"><span></span>一级菜单1</a></dt>
<dd id="items0">
<ul>
<li><a href="#" onClick="doclickA(this)">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
<li><a href="#">二级菜单5</a></li>
<li><a href="#">二级菜单6</a></li>
<li><a href="#">二级菜单7</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:void(0);" class="plus" onclick="showHide(this,'items1');"><span></span>一级菜单2</a></dt>
<dd id="items1" style="display:none;">
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
<li><a href="#">二级菜单5</a></li>
<li><a href="#">二级菜单6</a></li>
<li><a href="#">二级菜单7</a></li>
</ul>
</dd>
</dl>
</div>
</li>
</ul>
</div>
</body>
</html>
这个基本搞懂了，但我把DL又复制两个，后面复制出来的不起作用，我用FOR也没成功