选择框(select)添加或者减少选项(option)操作的js代码
选择框(select)添加或者减少选项(option)操作的js代码如下所示：function changeToSelect(){ var selected = document.forms.enterTypesSelected; var noSelected = document.forms.enterTypesNOSelect; var selectedColl = selected.options; var noSelectedColl = noSelected.options; var enterTypes = document.forms.enterTypes.value; var tLen = noSelectedColl.selectedIndex; if(tLen > -1) { var tValue = noSelectedColl.options.value; var tText =noSelectedColl.options.text; addOption(selectedColl,tValue,tText); removeOption(noSelectedColl,tLen); } else { alert("请从类别列表中选择类别！"); return; }}function changeToNoSelect(){ var selected = document.forms.enterTypesSelected; var noSelected = document.forms.enterTypesNOSelect; var selectedColl = selected.options; var noSelectedColl = noSelected.options; var tLen = selected.selectedIndex; if(tLen > -1) { var tValue = selected.options.value; var tText =selected.options.text; addOption(noSelectedColl,tValue,tText); removeOption(selectedColl,tLen); } else { alert("请从类别列表中选择类别！"); return; }}function addOption(colls,value,text){ colls.add(createOption(text,value)); colls.selectedIndex = colls.selectedIndex.length-1;}function createOption(text,value){ return new Option(text,value);}function removeOption(colls,index){ if(index >-1) { colls.remove(index); colls.selectedIndex = colls.selectedIndex.length-1; }}
页面HTML代码如下所示：
<table width="65%"border="0" cellspacing="0" cellpadding="0"><tr class="tdbg"><td height="22" width="37%" bgcolor="#FFFFFF" class="PL6"><strong>待选择类别：</strong></td><td width="14%" bgcolor="#FFFFFF">&nbsp;</td><td width="49%" bgcolor="#FFFFFF" class="PL6"><strong>已选中类别:</strong></td></tr><tr class="tdbg"><td bgcolor="#FFFFFF"> <select name="enterTypesNOSelect" multiple style="width:150px;overflow:auto" size="5"> <option value="2">物业子系统</option> <option value="3">商家子系统</option> <option value="4">管委会子系统</option> <option value="5">商会子系统</option> </select> </td><td bgcolor="#FFFFFF"><a href="#" ><img src="images/icon/icon_add_toselected.gif" border="0"></a><p><a href="#" ><img src="images/icon/icon_add_toselect.gif" border="0"></a></td><td height="22" nowrap bgcolor="#FFFFFF"><select name="enterTypesSelected" multiple style="width:150px;overflow:auto" size="5"> <option value="1">企业子系统</option> </select></td></tr></table>
页面的最终效果如下所示：
http://dl.iteye.com/upload/attachment/0074/7532/d3831bb5-89f7-32c1-ad88-aed58ee94013.png
页:
[1]