首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

带复选框(checkbox)的上拉列表

2012-10-08 
带复选框(checkbox)的下拉列表htmlheadtitle下拉框中的复选框/title/headscriptfunction aa(o

带复选框(checkbox)的下拉列表
<html>
<head>
<title>下拉框中的复选框</title>
</head>
<script>
function aa(obj,td_name)
{
     var select_value=document.getElementById("where");
     var td_value = document.getElementById(td_name);
     if(obj.checked == true){
   
          if(select_value.value.length>0){
             
               select_value.value+="," + td_value.innerText;
          }else{
               select_value.value+=td_value.innerText;
          }
     }else{
               if(select_value.value.indexOf("," + td_value.innerText + ",") != -1){
                         select_value.value = select_value.value.replace("," +

td_value.innerText,'');
               }else if(select_value.value.indexOf("," + td_value.innerText) != -1){
                         select_value.value = select_value.value.replace("," +

td_value.innerText,'');
               }else if(select_value.value.indexOf(td_value.innerText + ",") != -1){
                    select_value.value = select_value.value.replace(td_value.innerText + ",",'');
               }else if(select_value.value.indexOf(td_value.innerText) != -1){
                    select_value.value = select_value.value.replace(td_value.innerText,'');
               }
     }

}
function bb(){
     var obj = document.getElementById("ds");
     if(obj.style.display==""){
          obj.style.display="block";
     }else if(obj.style.display=="none"){
          obj.style.display="block";
     }else if(obj.style.display=="block"){
          obj.style.display="none";
     }
   
     }
   
     function inDaohang(divname,obj){
     var f = false;
     while(obj.parentNode){
          if(obj.name==divname){
               return true;
          }
          obj = obj.parentNode;
     }
     return false;
}
function closeDaohang(e,divname,aname){
     if(e.id!=aname && e.id!='where' && e.id.indexOf("td") ==-1&& e.id.indexOf("check") ==-1)
     if(!inDaohang(divname,e)){
          var a = document.getElementsByName(divname);
          for(var i=0;i<a.length;i++){
               a[i].style.display='none';
          }

     }

}
   
</script>
<style type="text/css">
body{
     margin:0px;
     SCROLLBAR-FACE-COLOR: #e0edfd;
     SCROLLBAR-HIGHLIGHT-COLOR: #dfe8f4;
     SCROLLBAR-SHADOW-COLOR: #2c7cda;
     SCROLLBAR-3DLIGHT-COLOR: #2c7cda;
     SCROLLBAR-ARROW-COLOR: #14549f;
     SCROLLBAR-TRACK-COLOR: #eaf5fd;
     SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
     SCROLLBAR-BASE-COLOR: #e0edfd;
}
.menu{
    display:none;
}
input.blur{
     border:1px solid #99BBE8;
     background:#FFFFFF;
     height:18px;
}
.tableborder{
border:solid 1px #CCCCCC;
border-collapse:collapse;
font-size:12px;

}
</style>

<body onclick="closeDaohang(event.srcElement||event.target,'ds','xx')">
     <form>
<div id="xx">
<table>
          <tr>
               <td>
                    <input type="text" id="where" name="where" style="width:100px" onclick="bb()"

onblur="this.className='blur'" onfocus="this.className='focus'" readonly>
               </td>

</table>
</div>
     <div id="ds" style="display:none;padding:0px 0px 0px 0px; margin:0;">
          <table border="0" cellpadding="0" cellspacing="0" id="check1" name="idol02" value="123"

onclick="aa(this,'td1')">123</td></tr>
                    <tr><td id="td2"><input type="Checkbox" id="check2" name="idol02" value="232"

onclick="aa(this,'td2')">232</td></tr>
                    <tr><td id="td3"><input type="Checkbox" id="check3" name="idol02" value="3421"

onclick="aa(this,'td3')">3421</td></tr>   
     </table>
          </div>
     </form>
</body>
</html> 1 楼 Queenahuan 2012-07-19   写的太好的!!学习了

热点排行