web上的复选控件

来源：互联网发布：跳跳软件下载编辑：程序博客网时间：2024/05/16 07:22

最近在做web开发时，碰到了要多选的情况，本来html是提供这样的语句：

这样你就可以在按住leftmousebutton的情况下，选择多个选项，提交。本来这样做也就够了，但是有很多情况下需要做成采用复选框来选择复选框更合适一点。话不多少，我也是没办法才这么做的，如果本身这个控件已经能让人满意，也不会有我下面的代码。

/*
   leewer made it on 2005.10.09 to replace the multiple select!
   because the microsoft still hasn't supply a control like the following ,and what's more
   we should abide by the rule of translate the request stream through form.
   So this is a compromise way!
   Any good idea ,please contact me with email :mmygg@yahoo.com.cn
*/

// width,height is the select's width and height you want
// leetarget is the select you want to replaced!

function MultipleSelect(width,height,leetarget){
count=0;
this.err="";

      disabled=false;
      var leehtml="";
      try{

         document.write( "<iframe id=/"leewerSelectBody/" width=/""+width+"/" height=/""+height+"/"></iframe>");
         document.getElementById(leetarget).style.display ="none";
         disabled=document.getElementById(leetarget).getAttribute("disabled");

         leehtml=" <html><head>";
         leehtml+=" <script language=/"javascript/">";
         leehtml+=" function onBoxClick(p,q,count) {   ";
         leehtml+=" var pBoxes=parent.document.getElementById(/""+leetarget+"/").options;";
         leehtml+="   if(q.checked){     ";
         leehtml+="    p.className=/"selectit/";";
         leehtml+="     pBoxes.item(count).selected=true;";
         leehtml+="   } ";
         leehtml+="   else {" ;
         leehtml+="     pBoxes.item(count).selected=false;";
         leehtml+="     p.className=/"/";";
         leehtml+="    }";
         leehtml+=" }   ";
         leehtml+=" <//script>";
         leehtml+=" <style> ";
         leehtml+=" .selectit { background-color:#003399; color:white}";
         leehtml+=" .disabledselect {background-color:#003399; color:gray}";
         leehtml+=" .disabledit {color:gray}";
         leehtml+=" </style>";
         leehtml+=" </head>";
         leehtml+=" <body style='font-size:9pt' topMargin='0' leftMargin='0'>";

document.body.setAttribute("topMargin","0");

         }
         var selectArray=selectBoxes.options;
         for(var i=0;i<selectArray.length-1;i++) {
            addItem(selectArray.item(i).value,selectArray.item(i).text,selectArray.item(i).selected);
         }
         leehtml+=" </body>";
         leehtml+=" </html>";
         //document.frames["leewerSelectBody"].document.body.innerHTML="";
         leewerSelectBody.document.write(leehtml);

      }
      catch(e){
         this.err=" something is wrong :"+e.description+",please contact me with email:mmygg@yahoo.com.cn";
         alert(this.err);
      }

}

把上面这段代码放在一个js里，在想替换那个multiple控件的代码后面放入：
<script language="javascript">
var t=new MultipleSelect(100,100,"selectname");
//selectname就是你本来的select控件的名称。
</script>
基本上就搞定了。

比如我的html代码里有这么一段：
<script language="javascript" src="leewerMultiSelect.js"></script>
<form>
   <select multiple="true" disabled="disabled" name="multipleSelect">
            <option value="a" selected="selected">0</option>
            <option value="b">1</option>
            <option value="c" selected="selected">2</option>

   </select>
   <script language="javascript">
var t=new MultipleSelect(100,100,"multipleSelect");
//selectname就是你本来的select控件的名称。
</script>
</form>

这样,你看到的就是的效果了，这样可以不影响原先的控件，又可以达到复选的目的。如果还有什么更好的方法，欢迎大家告诉我:mmygg@yahoo.com.cn