选择框(select)添加或者减少选项(option)操作的js代码如下所示:
function changeToSelect() { var selected = document.forms[0].enterTypesSelected; var noSelected = document.forms[0].enterTypesNOSelect; var selectedColl = selected.options; var noSelectedColl = noSelected.options; var enterTypes = document.forms[0].enterTypes.value; var tLen = noSelectedColl.selectedIndex; if(tLen > -1) { var tValue = noSelectedColl.options[tLen].value; var tText = noSelectedColl.options[tLen].text; addOption(selectedColl,tValue,tText); removeOption(noSelectedColl,tLen); } else { alert("请从类别列表中选择类别!"); return; } } function changeToNoSelect() { var selected = document.forms[0].enterTypesSelected; var noSelected = document.forms[0].enterTypesNOSelect; var selectedColl = selected.options; var noSelectedColl = noSelected.options; var tLen = selected.selectedIndex; if(tLen > -1) { var tValue = selected.options[tLen].value; var tText = selected.options[tLen].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"> </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="#" onClick="changeToSelect()"><img src="images/icon/icon_add_toselected.gif" border="0"></a>
<p><a href="#" onClick="changeToNoSelect()"><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>
页面的最终效果如下所示: