jquery - jquery从一个到另一个选择选项

Question

在下面的多个选择框中，当单击更改按钮时，我想填充id="p_prod“中的所有选定项目以显示id="s_prod"并在 p_prod 中删除它们，并且在单击还原时，我希望它们从 s_prod 中删除并在 p_prod 中重新填充它们像以前一样订购..如何做到这一点

<select size="10"  multiple="multiple" id="p_prod">
 <option value="1">prod1</option>                                   
 <option value="2">prod2</option>
 <option value="3">prod3</option>
 <option value="4">prod4</option>
 </select>

 <select mulitple="multiple" id="s_prod">
 </select>
<input type="button" id="change" value="change" onclick="val();"/>
<input type="button" id="revert" value="revert" onclick="val();"/>

function val()
{
  $('#p_prod option:selected').removeAttr('selected');
}

Answer 1

您可以使用appendTo()selcted获取选项并附option:selected加到其他选项。它将自动从第一个选择中删除选项。select

现场演示

$('#p_prod option:selected').appendTo('#s_prod');

要恢复你需要存储索引，你需要这样的东西，

现场演示

$('#change').click(function () {
    $('#p_prod option:selected').each(function () {
        $(this).data('prevIndex', $(this).index());
        $(this).appendTo('#s_prod');
    });
});

$('#revert').click(function () {    
    debugger
    $('#s_prod option').each(function () {        
        currentOptIndex =  $(this).data('prevIndex');
        if(currentOptIndex > 0)
           $('#p_prod option').eq(currentOptIndex).after(this);              
        else
            $('#p_prod').prepend(this);              
    });
});