日期:2014-05-16  浏览次数:20382 次

借助下拉列表框选项排序的js,同时兼容IE6与IE8兼容的问题
注:IE7下未测试。

页面代码:
<table class=table-border align="center" cellspacing="1" cellpadding="1" width="100%">
				<tr>
					<td class="table-bar" align="center">
						合同排序
					</td>
				</tr>
				<tr>
					<td class="table-content" align="center">
						<select name="contractIds" size="15" style="width:100%;" multiple>
							<ww:if test="list.size>0">
								<ww:iterator value="list">
									<option value="<ww:property value='id'/>">
										<ww:property value='contractName'/>
									</option>
								</ww:iterator>
							</ww:if>
						</select>
					</td>
				</tr>
				<tr>
					<td class="table-content" align="center">
						<input type="button" class="button" name="Submit" value=" 向上 " onClick="moveUp($('contractIds'));">
						<input type="button" class="button" name="Submit2" value=" 向下 " onClick="moveDown($('contractIds'));">
						<input type="button" class="button" name="Submit" value=" 确定 " onClick="sort($('contractIds'))">
						<input type="button" class="button" name="Submit" value=" 取消 " onClick="doPageBack()">
					</td>
				</tr>
			</table>


js代码:

<script language="JavaScript">
	/*
	*把选中的选项往上移动
	*object select对象
	*/
	function moveUp(object){
		for(var i=0;i<object.options.length;i++){
			var oOption=object.options[i];
			if(oOption.selected){
				if(i>0){
					/*
					var lastIndex = i-1;
					var lastOption=object.options[lastIndex];
					object.insertBefore(oOption,lastOption);
                                        //此方法导致IE8下拉框会自动缩小
					*/
					
					//lixf 解决IE8下拉框会自动缩小的问题
					var lastIndex = i-1;
					var lastOption=object.options[lastIndex];
					var temp = oOption.text;
					var temp2 = oOption.value;
					oOption.text = lastOption.text;
					oOption.value = lastOption.value;
					lastOption.text = temp;
					lastOption.value = temp2;
					oOption.selected = false;
					lastOption.selected = true;
				}
			}
		}
	}