在java中,常用的下拉框信息的移动,例如:多选框信息移动到多选框,多选框信息移动到单选框等。
?
1.多选框信息移动到多选框(一个名字为kexuan可选下拉框,一个名字为yixuan的下拉框):
?
<select size="20" name="kexuan" multiple style="width:165; height:120" />
?????<option>----可选----</option>
?</select>
?
<select size="20" name="yixuan" multiple style="width:165; height:120" />
?????<option>----已选----</option>
?</select>
?
两个按钮,一个名称addbt的按钮,是将可选信息添加到已选信息的按钮。另一个名字为delbt的按钮,是将已选信息,重新移回到可选中:
?
<input type="button" name="addbt" value="添加"/>
<input type="button" name="delbt" value="删除"/>
?
选中你需添加的可选信息,点击添加按钮即可。
<input type="button" name="addbt" value="添加" onclick="addSlt(form的名称,'kexuan','yixuan');"/>
在已选总,选中需删除的信息,点击删除按钮即可,已选信息将会重新回到可选中。
<input type="button" name="delbt" value="删除" onclick="addSlt(form的名称,'yixuan','kexuan');"/>
(注:添加和删除可调用同一个方法,只是传入的对象不同。)
显示的js代码如下:
?
function addSlt(frmname,keslt,yislt){
? var ks = windows.document.forms[frmname].elements[keslt];
? var ys = windows.document.forms[frmname].elements[yislt];
??var m=0;
? var n=1;
? var arrT=new Array(ks.length);?
? var arrV=new Array(ks.length);
? for(var i=0;i<ks.length;i++){
????? if(ks.options[i].selected=true){
?????????? m=0;
?????????? for(var j=0;j<ys.length;j++){
?????????????? if(ks.options[i].value==ys.options[j].value){
?????????????????? m++;
?????????????????? break;
?????????????? }
?????????? }
?????????? if(m==0){
?????????????? ys.length++;
?????????????? ys.options[ys.length-1].value=ks.options[i].value;
???????????????ys.options[ys.legnth-1].text=ks.options[i].text;
?????????? }
????? }else{
??????????arrT[j]=ks.options[i].text;
????????? arrv[j]=ks.options[i].value;
????????? n++;
???? }
? }
? if(n!=ks.length){
???? ks.length=1;
???? for(var i=0;i<n;i++){
??????? ks.options[i].value=arrV[i];
????????ks.options[i].text=arrT[i];
???? }
? }
}
?
2.多选框的信息添加到单选框。将可选的要素选中,添加到单选框中:
<select name="danxuan">
?? <option>--单选--</option>
</select>
?
<input type="button" name="dxaddbt" value="添加到单选" onclick="dxaddSlt(frmname,'kexuan','danxuan');"/>
?
js方法,如下:
function dxaddSlt(frmname,kxslt,dxslt){
?? var kx = windows.document.forms[frmname].elements[kxslt];
?? var dx = windows.document.forms[frmname].elements[dxslt];
?
?? var t=0;
?? for(var i=0;i<kx.length;i++){
??????? if(kx.options[i].selected==true){
??????????????t=0;
????????????? for(var j=0;j<dx.length;j++){
??????????????????? if(kx.options[i].value==dx.options[j].value){
??????????????????????? t++;
???????????????????????? break;
??????????????????? }
?????????????? }
??????????????? if(t==0){
??????????????????? dx.length++;
????????????????????dx.options[dx.length-1].value=kx.options[i].value;
??????????????????? dx.options[dx.length-1].text=kx.options[i].value;
??????????????? }
??????? }
?? }
??
}
这个方法与第一个方法大同小异。
?
3.若在第一个多选框到多选框中,删除的时候,同时删除单选框中存在的值。方法如下:
function deldx(frmname,yxslt,dxslt){
?? var yx=windows.document.forms[frmname].elements[yxslt];
?? var dx=windows.document.forms[frmname].elements[dxslt];
?? for(var i=0;i<yx.length;i++){
?????? for(var j=0;j<dx.length;j++){
??????????? if(yx.options[i].selected==true){
?????????????????if(yx.options[i].value==dx.options[j].value){
????????????????????? dx.options[j].removeNode(true);
?????????????????}
????????????}
?????? }
??? }
}
?
以上方法仅供参考。