Question

我正在尝试使用按钮移动选择框中的项目..为此我使用了swapNode（）。但它只在IE中工作。在chrome不工作如何使它在chrome中工作这是我的代码

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

Answer 1

swapNode（）是一个Microsoft DOM扩展，因此除IE之外的浏览器不会识别。

我在FireFox中运行你的例子并使用了FireBug（你应该下载这个插件并在这种情况下使用它，如果你还没有）并且确定控制台抛出一个错误，即swapNode（）是“不是一个函数”

如果我从这里建议你，我建议你去查找一个jQuery插件或类似的东西来实现这种功能。像jQuery这样的库倾向于为这些类型的javascript问题提供跨浏览器解决方案，最重要的是通常不是开源的（因此，如果您愿意，可以查看代码并重新编写自己的实现）。 http://jquery.com/

或者，您可以在代码中提供swapNode（）函数，以便其他浏览器可以选择它。如果您计划采用此路线，您应该能够通过快速Google搜索找到实施方案。我在下面提供了一个这样的实现的链接（我没有审查或使用此代码，仅在审阅后使用）。然而，在我的拙见中，最好避免使用具有浏览器依赖性的解决方案，因为它们并不总是未来证明，并且通常会导致无法预料的问题。 http://sundberg.it/2006/05/12/swapnode_in_firefox

祝你好运！

关于在选择框中移动项目

1 个答案: