我试图通过使用按钮来移动选择框中的项目。为此，我使用了swapNode（）。
但这仅在IE中有效。在铬不工作如何使其在铬
这是我的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Moving the options up and down in Multiple select box </title>
<script type="text/javascript">
function move(id)
{
if (id=='up')
{
var len= document.f1.selectbox1.options.length;
if (document.f1.selectbox1[0].selected)
{
alert("This is the first record");
return false;
}
var up_id=document.f1.selectbox1.selectedIndex;
document.f1.selectbox1[up_id].swapNode(document.f1.selectbox1[up_id-1]);
}
if (id=='down')
{
var len=document.f1.selectbox1.options.length;
if (document.f1.selectbox1[len-1].selected)
{
alert("This is last record");
return false;
}
var down_id=document.f1.selectbox1.selectedIndex;
document.f1.selectbox1[down_id].swapNode(document.f1.selectbox1[down_id+1]);
}
if (id=='top')
{
var len=document.f1.selectbox1.options.length;
if (document.f1.selectbox1[0].selected)
{
alert("This is the first record");
return false;
}
var top_id=document.f1.selectbox1.selectedIndex
for (var j=top_id;j>0 ;j-- )
{
document.f1.selectbox1[j].swapNode(document.f1.selectbox1[j-1]);
}
}
if (id=='bottom')
{
var len=document.f1.selectbox1.options.length;;
if(document.f1.selectbox1[len-1].selected)
{
alert("This is last record");
return false;
}
var bot_id=document.f1.selectbox1.selectedIndex
for (var k=bot_id; k<len-1;k++)
{
document.f1.selectbox1[k].swapNode(document.f1.selectbox1[k+1]);
}
}
}
</script>
</head>
<body>
<form name="f1">
<select multiple size="20" style="width:30%" name="selectbox1" id="select_box">
<option id="1">First item</option>
<option id="2">Second item</option>
<option id="3">Third item</option>
<option id="4">Fourth item</option>
<option id="4">Fifth item</option>
<option id="4">Sixth item</option>
<option id="4">Seventh item</option>
<option id="4">Eighth item</option>
<option id="4">Ninth item</option>
<option id="4">Tenth item</option>
</select><br>
<input type="button" value="Up" onClick="move('up')">
<input type="button" value="Down" onClick="move('down')">
<input type="button" value="Top" onClick="move('top')">
<input type="button" value="Bottom" onClick="move('bottom')">
</form>
</body>
</html>
最佳答案
swapNode（）是Microsoft DOM扩展，因此IE以外的浏览器将无法识别结果。
我在FireFox中运行了您的示例，并使用了FireBug（您应该下载此插件，如果还没有，请在类似情况下使用它），并确保控制台抛出一个错误，表明swapNode（）不是“函数”。
如果我要从这里为您提供建议，我建议您去查找一个jQuery插件或实现此类功能的某种东西。像jQuery这样的库往往会为此类JavaScript问题提供跨浏览器解决方案，而最好的情况是大多数情况下不是开源的（因此，您可以浏览一下代码，并根据需要修改自己的实现）。
http://jquery.com/
另外，您可以在代码中简单地提供swapNode（）函数，以便其他浏览器可以选择它。如果您打算走这条路，那么应该可以通过快速的Google搜索找到实现。我在下面提供了一个这样的实现的链接（我没有查看或使用此代码，仅在查看后使用）。但是，以我的拙见，最好避免使用具有浏览器依赖性的解决方案，因为这些解决方案并不总是面向未来的，并且经常会导致无法预料的问题。
http://sundberg.it/2006/05/12/swapnode_in_firefox
祝好运！
关于javascript - 关于在选择框中移动项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4436071/