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

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

<强> Live Demo

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

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

<强> Live Demo

$('#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);              
    });
});

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

1 个答案: