关于list。如何将某Option改变它的排列顺序?

lirc 2002-09-26 04:32:31
页面中有一个list,
<select name="listtest" size="6" style="width:80pt">
</select>

用js增加了几个option
选中某option,再点击一个按钮,把某个option上移,该如何做?

我在按钮的onclick事件中调用下面的js函数,但没反应。

function moveup() {
var i = document.Form1.listtest.selectedIndex;
if (i > 0)
document.Form1.listtest.options[i].index = i - 1;
}

该如何修改这段程序?
谢谢。
...全文
144 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
lirc 2002-09-27
  • 打赏
  • 举报
回复
谢谢孟子,我正发愁如何得到那个顺序呢。
结贴了。
qiushuiwuhen 2002-09-27
  • 打赏
  • 举报
回复
2.
function moveup() {
with(document.Form1.rightlist){
i=selectedIndex;
if (i > 0) {
tmp=new Option(options[i].text,options[i].value);
options[i]=new Option(options[i-1].text,options[i-1].value);
(options[i-1]=tmp).selected=true;
}
}
}
qiushuiwuhen 2002-09-27
  • 打赏
  • 举报
回复
1.
function moveup() {
with(document.Form1.rightlist){
i=selectedIndex;
if (i > 0) {
tmp=new Option(options[i].text,options[i].value);
options[i]=new Option(options[i-1].text,options[i-1].value);
options[i-1]=tmp;
selectedIndex=i-1;
}
}
}
孟子E章 2002-09-27
  • 打赏
  • 举报
回复
<script>
function moveSelected(select, down)
{
if (select.selectedIndex != -1) {
if (down) {
if (select.selectedIndex != select.options.length - 1)
var i = select.selectedIndex + 1;
else
return;
}
else {
if (select.selectedIndex != 0)
var i = select.selectedIndex - 1;
else
return;
}
var swapOption = new Object();
swapOption.text = select.options[select.selectedIndex].text;
swapOption.value = select.options[select.selectedIndex].value;
swapOption.selected = select.options[select.selectedIndex].selected;
swapOption.defaultSelected = select.options[select.selectedIndex].defaultSelected;
for (var property in swapOption)
select.options[select.selectedIndex][property] = select.options[i][property];
for (var property in swapOption)
select.options[i][property] = swapOption[property];
}
}


function getSelectOrder(obj)
{

var str = "<itemorders>";
for(var i = 0;i<obj.selectName.options.length;i++)
{
str += "<item><itemorder>" + (i + 1) + "</itemorder><href>" + obj.selectName.options[i].value + "</href></item>"
}
str += "</itemorders>"
obj.getXMLOrder.value = str
alert(obj.getXMLOrder.value)
}

</script>
<body onload="document.formName.selectName.size=document.formName.selectName.options.length">
<table class="CustOuterTable" width="98%" border="0" cellspacing="0" cellpadding="0" align="center">
<form action="" method="post" name="formName" onsubmit="return getSelectOrder(this)">
<tr><td style="padding-top:4px;">
<table>
<tr>
<td style="padding-left:10px">
<select name="selectName" size="100">
<option value="http://lucky.myrice.com/">AAAAA</option>
<option value="News/">bbbb</option>
<option value="Law/">CCCC</option>
<option value="Exam/">FFFF</option>

</select>
</td>
<td>
<input type="button" value="↑" class="CustButton" onclick="moveSelected(this.form.selectName, false)" />
<br />
<input type="button" value="↓" class="CustButton" onclick="moveSelected(this.form.selectName, true)" />
</td>
</tr>
</table>
<br />
<div style="padding:6px" align="right">
<input type="hidden" value="" name="getXMLOrder" />
<input type="submit" value=" 确 定 "/>
</div>
</td>
</tr>
</form>
</table>
lirc 2002-09-27
  • 打赏
  • 举报
回复
一个晚上过去了。。。
lirc 2002-09-26
  • 打赏
  • 举报
回复
没人看到啊?还是太简单了?
把相关代码都贴上来了。
主要就是左右两个List,可以全部/单独把左侧的移到右侧,或者把右侧的全部/单独删除。右侧的顺序还可以调整。
算是散代码么?

<script>
function addall() {
var i;
for (i = 0; i < document.Form1.leftlist.length; i++) {
var oOption = document.createElement("OPTION");
document.Form1.rightlist.options.add(oOption);
oOption.innerText = document.Form1.leftlist.options[i].text;
oOption.value = document.Form1.leftlist.options[i].text;
}
for (i = document.Form1.leftlist.length - 1; i >= 0; i--) {
document.Form1.leftlist.remove(i);
}
}

function addone() {
var i = document.Form1.leftlist.selectedIndex;
if (i != -1) {
var oOption = document.createElement("OPTION");
document.Form1.rightlist.options.add(oOption);
oOption.innerText = document.Form1.leftlist.options[i].text;
oOption.value = document.Form1.leftlist.options[i].text;
document.Form1.leftlist.remove(i);
}
}

function removeall() {
var i;
for (i = 0; i < document.Form1.rightlist.length; i++) {
var oOption = document.createElement("OPTION");
document.Form1.leftlist.options.add(oOption);
oOption.innerText = document.Form1.rightlist.options[i].text;
oOption.value = document.Form1.rightlist.options[i].text;
}
for (i = document.Form1.rightlist.length - 1; i >= 0; i--) {
document.Form1.rightlist.remove(i);
}
}

function removeone() {
var i = document.Form1.rightlist.selectedIndex;
if (i != -1) {
var oOption = document.createElement("OPTION");
document.Form1.leftlist.options.add(oOption);
oOption.innerText = document.Form1.rightlist.options[i].text;
oOption.value = document.Form1.rightlist.options[i].text;
document.Form1.rightlist.remove(i);
}
}

function moveup() {
var i = document.Form1.rightlist.selectedIndex;
if (i > 0) {
var t = document.Form1.rightlist.options[i].text;
var v = document.Form1.rightlist.options[i].text;
document.Form1.rightlist.remove(i);

var oOption = document.createElement("OPTION");
document.Form1.rightlist.options.add(oOption, i - 1);
oOption.innerText = t;
oOption.value = v;

document.Form1.rightlist.focus();
document.Form1.rightlist.options[i - 1].selected = true;
}
}

function movedown() {
var i = document.Form1.rightlist.selectedIndex;
if (i >= 0 && i < document.Form1.rightlist.length - 1) {
var t = document.Form1.rightlist.options[i].text;
var v = document.Form1.rightlist.options[i].text;
document.Form1.rightlist.remove(i);

var oOption = document.createElement("OPTION");
document.Form1.rightlist.options.add(oOption, i + 1);
oOption.innerText = t;
oOption.value = v;

document.Form1.rightlist.focus();
document.Form1.rightlist.options[i + 1].selected = true;
}
}
</script>

<form name="Form1" method="post" action="">
<center>
<table width="80%" border="0">
<tr>
<td rowspan="4" width="25%">
<select name="leftlist" size="6" style="width:80pt">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="test4">test4</option>
<option value="test5">test5</option>
<option value="test6">test6</option>
<option value="test7">test7</option>
<option value="test8">test8</option>
</select>
</td>
<td width="25%">
<input type="button" name="button1" value=">>" onClick="addall();" style="width: 45pt">
</td>
<td rowspan="4" width="25%">
<select name="rightlist" size="6" style="width:80pt">
</select>
</td>
<td width="25%"> </td>
</tr>
<tr>
<td><input type="button" name="button2" value=">" onClick="addone();" style="width: 45pt"></td>
<td><input type="button" name="button3" value="上移" onClick="moveup();" style="width: 45pt"></td>
</tr>
<tr>
<td><input type="button" name="button4" value="<" onClick="removeone();" style="width: 45pt"></td>
<td><input type="button" name="button5" value="下移" onClick="movedown();" style="width: 45pt"></td>
</tr>
<tr>
<td><input type="button" name="button6" value="<<" onClick="removeall();" style="width: 45pt"></td>
<td> </td>
</tr>
</table>
</center>
</form>
kaney00 2002-09-26
  • 打赏
  • 举报
回复
,呵呵,得分的机会来了,
lirc 2002-09-26
  • 打赏
  • 举报
回复
又是我自己解决的。
1?为什么说又呢?

加上两行,搞定。

document.tableForm.displayfield.focus();
document.tableForm.displayfield.options[i - 1].selected = true;

感谢msdn.microsoft.com。


谁来回复给谁分好了。
lirc 2002-09-26
  • 打赏
  • 举报
回复
我用下面这个方法可以实现上移,但是如何使某option上移后仍然处于选中的状态(就是变为高亮)?

function moveup() {
var i = document.tableForm.displayfield.selectedIndex;

if (i > 0) {
var t = document.tableForm.displayfield.options[i].text;
var v = document.tableForm.displayfield.options[i].text;
document.tableForm.displayfield.remove(i);

var oOption = document.createElement("OPTION");
document.tableForm.displayfield.options.add(oOption, i - 1);
oOption.innerText = t;
oOption.value = v;

}
}

87,993

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧