用div模拟了个带复选款的下拉列表，还有点需求，请高手帮忙！

<html>
<!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" />
<head> <style type="text/css">
div{
  padding:0px;
  font-size:12px;
}
#mainbox{
  width:234px;
}
#box0{
  width:200px;
  height:20px;
  border:1px solid;
  float:left;
  padding-top:2px;
  padding-left:2px;
  overflow-y:scroll;
}
#box1{
  width:20px;
  height:20px;
  cursor:pointer;
  border:1px solid;
  float:left;
  text-align:center;
  padding-top:2px;
}
#items{
  border:1px solid black;
  width:203px;
  display:none;
  height:100px;
  overflow-y:scroll;
}
#box3{
  width:118px;
  padding-left:4px;
}
.over{
  font-weight:bold;
  cursor:pointer;
}
p{
  font-size:12px;
  color:activeCaption;
  font-weight:bold;
}
</style>  
    
  </head>
  <body>
  
 
  <div id="mainbox">
  <div id="box0"></div><div id="box1">↓</div>
<div id="items" style="">
  <table border="0" width="100%" >
<table border="0" width="100%" cellpadding="0" cellspacing="1" >
  <tr>
  <td width="10%"><input value="笔记本" id="test" type=checkbox </td>
  <td>笔记本</td>   
  </tr >
  <tr>
  <td><input value="打印机" id="test" type=checkbox></td>
  <td>打印机</td>
  </tr>   
  <tr>
  <td><input value="复印纸" id="test" type=checkbox></td>
  <td>复印纸</td>  
  </tr>
    
</table></table>
</div>
  </div>
    
  </body>
  <script type="text/javascript">
  var flag=0;
  var oDiv0=document.getElementById("box0");
  var oDiv1=document.getElementById("box1");
  var oDiv=document.getElementById("items");
  oDiv1.onclick=function(){
  if(flag==0){
  oDiv.style.display="block";  
  flag = 1;
  }
  else{
  flag=0;  
  oDiv.style.display="none";  
  getCheckedValues();
 }  }  
    
  oDiv0.onclick=function(){
  if(flag!=0){
  flag=0;  
  oDiv.style.display="none";  
  getCheckedValues();
 }  }  
    
  function getCheckedValues(){
    
  var values = document.getElementsByName("test");
    
  var selectValue="";
    
  for(var i=0;i<values.length;i++){
if(values[i].checked){  
  selectValue += values[i].value +" | ";
}
  }   
  document.getElementById("box0").innerText=selectValue;alert(document.getElementById("box0").innerText);
  }  
</script></html>
需求如下：写一个单行不确定列的表格，当选择了某些checkbox 后，将其值设置到此表格中，请高手帮忙啊！

解决方案 »

  1.   

    <html>
    <!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" />
    <head> <style type="text/css">
    div{
      padding:0px;
      font-size:12px;
    }
    #mainbox{
      width:234px;
    }
    #box0{
      width:200px;
      height:20px;
      border:1px solid;
      float:left;
      padding-top:2px;
      padding-left:2px;
      overflow-y:scroll;
    }
    #box1{
     
      height:20px;
      cursor:pointer;
      border:1px solid;
      float:left;
      text-align:center;
      padding-top:2px;
    }
    #items{
      border:1px solid black;
      width:203px;
      display:none;
      height:100px;
      overflow-y:scroll;
    }
    #box3{
      width:118px;
      padding-left:4px;
    }
    .over{
      font-weight:bold;
      cursor:pointer;
    }
    p{
      font-size:12px;
      color:activeCaption;
      font-weight:bold;
    }
    </style>  
       
       <script language="javascript" type="text/javascript">
           function setValue(obj) {
               var objDisplay = document.getElementById("box0");
               if (obj.type == "checkbox" && obj.checked) {
                   if (objDisplay.innerHTML.indexOf(obj.value) < 0) {
                       objDisplay.innerHTML += obj.value;
                   }
               }
               else {
                   objDisplay.innerHTML = objDisplay.innerHTML.replace(obj.value, "");
               }
           }
       </script>
      </head>
      <body>
      
     
      <div id="mainbox">
      <div id="box0"></div><div id="box1">select</div>
    <div id="items" style="">
      <table border="0" width="100%" >
    <table border="0" width="100%" cellpadding="0" cellspacing="1" >
      <tr>
      <td width="10%"><input value="one" id="test" type=checkbox  onclick="setValue(this)" /></td>
      <td>one</td>  
      </tr >
      <tr>
      <td><input value="two" id="test" type=checkbox onclick="setValue(this)" /></td>
      <td>two</td>
      </tr>  
      <tr>
      <td><input value="three" id="test" type=checkbox onclick="setValue(this)" /></td>
      <td>three</td>  
      </tr>
       
    </table></table>
    </div>
      </div>
       
      </body>
      <script type="text/javascript">
      var flag=0;
      var oDiv0=document.getElementById("box0");
      var oDiv1=document.getElementById("box1");
      var oDiv=document.getElementById("items");
      oDiv1.onclick=function(){
      if(flag==0){
      oDiv.style.display="block";  
      flag = 1;
      }
      else{
      flag=0;  
      oDiv.style.display="none";  
      getCheckedValues();
     }  }  
       
      oDiv0.onclick=function(){
      if(flag!=0){
      flag=0;  
      oDiv.style.display="none";  
      getCheckedValues();
     }  }  
       
      function getCheckedValues(){
       
      var values = document.getElementsByName("test");
       
      var selectValue="";
       
      for(var i=0;i<values.length;i++){
    if(values[i].checked){  
      selectValue += values[i].value +" | ";
    }
      }  
      document.getElementById("box0").innerText=selectValue;alert(document.getElementById("box0").innerText);
      }  
    </script></html>