如何在Chrome上的Javascript中向上移动选定的行

Question

我正在使用javascript向上移动选定的行，但是当我向上移动时，它似乎可以移动但旧行仍然存在。

例如：  我向上移动'bbbb'行，它可以向上移动但旧行仍然没有移除

这是我的消息来源：

function up_move(index)
{
var frm = document.writeForm;
var opts=frm["ans_list" + index].options

for (var i=0; i<opts.length; i++) {
    if (opts[i].selected && i>0) {          
        tmp=opts[i].cloneNode(true);
        // opts[i].removeChild(true);
        opts[i].removeChild(opts[i].childNodes[0]);
        opts[i-1].insertAdjacentElement("beforeBegin",tmp).selected=true;            
    }
}

setting_val(index); 
}

<tr>
   <td><a href="#" onClick="javasript:up_move('<%=i+1%>');" style="float:left"><span class="bt_test_admin bg_type_01">▲ Up</span></a></td>
</tr>

如何解决此错误？非常感谢！

Answer 1

使用jQuery，无需克隆和删除，您可以使用.insertBefore()和.insertAfter()函数。

<强> HTML：

<select size="5">
  <option>aaaa</option>
  <option>bbbb</option>
  <option>cccc</option>
  <option>dddd</option>
</select>

<button id="btn_up">up</button>
<button id="btn_down">down</button>

<强> jQuery的：

$(function() {
    $('#btn_up').on('click',function() {
        var sel = $('select option:selected');
        if (!sel.is(':first')) {
            sel.insertBefore(sel.prev());
        }
    });
    $('#btn_down').on('click',function() {
        var sel = $('select option:selected');
        if (!sel.is(':last')) {
            sel.insertAfter(sel.next());
        }
    });
});

小提琴： https://www.bootply.com/x2cUA8SEMQ

替代：

根据您的请求，<a href>

<a href="#" onClick="javascript:up_move();" style="float:left"><span class="bt_test_admin bg_type_01">▲ Up</span></a>
<br>
<a href="#" onClick="javascript:down_move();" style="float:left"><span class="bt_test_admin bg_type_01">Down</span></a>

<强> jQuery的：

function up_move() {
    var sel = $('select option:selected');
    if (!sel.is(':first')) {
        sel.insertBefore(sel.prev());
    }
}
function down_move() {
    var sel = $('select option:selected');
    if (!sel.is(':last')) {
        sel.insertAfter(sel.next());
    }
}

小提琴： http://jsfiddle.net/sbv6stqh/