最近在做web开发时,碰到了要多选的情况,本来html是提供这样的语句:
<select multiple="true" name="multipleSelect">
<option value="a">0</option>
<option value="b">1</option>
<option value="c">2</option>
....
</select>
这样你就可以在按住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 selectBoxes=document.getElementById(leetarget);
var addItem=
function (value,name,selected)
{
if(disabled==true||disabled=="true"||disabled=="disabled"){
if(selected==true||selected=="true"||selected=="selected"){
leehtml+= "<div id=/"lee"+count+"/" class=/"disabledselect/"> <input disabled=/"disabled/" type=/"checkbox/" name=/"leeCheckBox/" value=/""+value+"/" οnclick='javascript:onBoxClick(document.all.lee"+count+",this,"+count+")' checked=true>"+name+"</div>";
}
else{
leehtml+= "<div id=/"lee"+count+"/" class=/"disabledit/"> <input disabled=/"disabled/" type=/"checkbox/" name=/"leeCheckBox/" value=/""+value+"/" οnclick='javascript:onBoxClick(document.all.lee"+count+",this,"+count+")'>"+name+"</div>";
}
}
else{
if(selected==true||selected=="true"||selected=="selected"){
leehtml+= "<div id=/"lee"+count+"/" class='selectit'> <input type=/"checkbox/" name=/"leeCheckBox/" value=/""+value+"/" οnclick='javascript:onBoxClick(document.all.lee"+count+",this,"+count+")' checked=true>"+name+"</div>";
}
else{
leehtml+= "<div id=/"lee"+count+"/"> <input type=/"checkbox/" name=/"leeCheckBox/" value=/""+value+"/" οnclick='javascript:onBoxClick(document.all.lee"+count+",this,"+count+")'>"+name+"</div>";
}
}
this.count++;
}
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