借助下拉列表框选项排序的js，同时兼容IE6与IE8兼容的问题

最新推荐文章于 2022-10-21 15:50:42 发布

iteye_19467

最新推荐文章于 2022-10-21 15:50:42 发布

阅读量179

点赞数

分类专栏： js 文章标签： JavaScript JSP ViewUI

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现页面中下拉选择框内元素的排序功能，包括向上、向下移动选项和确定排序等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：IE7下未测试。

[b]页面代码：[/b]


<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>

[b]
js代码：[/b]


<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;
				}
			}
		}
	}