将所选项目从一个选择框移动到另一个选择框（防止重复）

Question

我有两个选择框，现在我想要的是 我想通过

下面的按钮将选项从一个选择框移动到另一个选择框，下面是我的代码：

php

<table>
    <tr>
        <td>
        <select  size="5" id="suppliedMovies" name="suppliedMovies">
            <option selected="selected" value="">Select Movie</option>          
            <option value="1">sholay</option>
            <option value="3">Jism</option>
            <option value="4">Rog</option>
            <option value="5">Zeher</option>
            <option value="6">Awarpan</option>
            <option value="7">Paap</option>
            <option value="8">paanch<option>
            <option value="9">no entry</option>
        </select>
        </td>
        <td>
            <input type="button" id="toRight" value="&gt;&gt;"><br>
            <input type="button" id="toLeft" value="&lt;&lt;">
       </td>
       <td>
        <select size="5" id="accquiredMovies" name="accquiredMovies">   
            <option> No item right now</option>
        </select>
       </td>
   </tr>
</table>

Jquery

jQuery(document).ready( function() {

 function displayVals() {
      var myValues = jQuery("#suppliedMovies").val();
      return myValues;
    }

    jQuery('#toRight').click(function(){
    var x=displayVals(); 
    console.log(x);
    var txt=jQuery("#suppliedMovies option[value='"+x+"']").text();
    console.log(txt);
    if(x!=''){
    jQuery('#accquiredMovies').append("<option value='"+x+"' >"+txt+"</option>");
    }           
    });         
});

我在上面使用 jQuery，工作正常，但是，我希望

当一个项目从一个选择框复制到另一个选择框时，然后该项目应该从第一个选择框中禁用（或可能删除）（以防止重复输入）。 我还想将项目从右选择框移动到左选择框 请建议我优化 jQuery 。 谢谢。

请更新

如果我想在两侧使用多个选择框， ？那我该如何使用它呢？

进行更多更新，

如果我单击右侧选择框上的项目并将其移动到左侧选择框，则会 并进一步（发布）然后在右侧选择框上，没有任何选定的项目？ 我需要的是右侧的选择框，所有项目都应始终被选中， 否则我需要做什么？当我从右向左移动一个项目后，我必须再次选择右侧选择框中的其余项目，并

为我使用下面代码的更新部分提供进一步的解决方案

，请看一下并建议我，如果有人发现其中有任何错误/错误。谢谢你

jQuery('form').submit(function() {  
        jQuery('#accquiredMovies option').each(function(i) {  
            jQuery(this).attr("selected", "selected");  
         });  
    }); 

Answer 1

您可以使用 jQuery 删除。像：

$('#suppliedMovies option[value=' + x ']').remove()

..fredrik

编辑：

您可以像这样优化函数：

jQuery(document).ready( function() {
    # Store the jQuery object return by the selector so that you don't need to
    # make a new selector request next time a user press the #toRight
    var suppliedSelect = jQuery('#suppliedMovies');

    jQuery('#toRight').click(function () {
        suppliedSelect.find(':selected').each(function (index, elem) {
            var selectElem = $(elem);
            if (selectElem.val()) {
                selectElem.val.appendTo('#accquiredMovies');
            }
         });
    });
});

Answer 2

    function SelectMoveRows(SS1,SS2)
    {
        var SelID='';
        var SelText='';
        // Move rows from SS1 to SS2 from bottom to top

        for (var i=SS1.children().length - 1; i>=0; i--)
        {
            if (SS1.children()[i].selected == true)
            {

                SelID=SS1.children()[i].value;
                SelText=SS1.children()[i].text;

                SS2.append($("<option/>", {value: SelID, text: SelText}));
                $(SS1.children()[i]).remove();
            }
        }
        SelectSort(SS2);
    }
    function SelectSort(SelList)
{
//  alert("in secod "+(SelList.children().length-1))
    var ID='';
    var Text='';
    for (var x=0; x < SelList.children().length-1; x++)
    {
//       alert(SelList.children()[x].text)
        for (var y=x + 1; y < SelList.children().length; y++)
        {

            if ($(SelList.children()[x]).val() > $(SelList.children()[y]).val())
            {
                // Swap rows
                alert("x "+SelList.children()[x].value +"  y = "+SelList.children()[y].value)
                ID=$(SelList.children()[x]).val();
                Text=$(SelList.children()[x]).text();

                $(SelList.children()[x]).val($(SelList.children()[y]).val());
                $(SelList.children()[x]).text($(SelList.children()[y]).text());

                $(SelList.children()[y]).val(ID);
                $(SelList.children()[y]).text(Text);
//                SelList.children()[x].text= SelList.children()[y].text;

//                SelList.children()[y].value=ID;
//                SelList.children()[y].text=Text;
            }
        }
    }
}

这也适用于将项目从一个多选框移动到另一个多选框而不重复。我想知道如何在将项目从一个选择框移动到另一个选择框时使值的顺序相同。

Answer 3

这是一个很好的示例：

HTML：

<form>
<select id="t1available" size=10  multiple><option>Project 1</option><option>Project 2</option><option>Project 4</option></select>
<br />
<input id="t1add" type="button" value=">" />
<input id="t1addAll" type="button" value=">>" />
<input id="t1removeAll"  type="button" value="<<" />
<input id="t1remove" type="button" value="<" />
<br />
<select id="t1published" size=10 multiple><option>Project 3</option></select>
</form>

Jquery：

<script type="text/javascript">
function moveSelectedItems(source, destination){
  var selected = $(source+' option:selected').remove();
  var sorted = $.makeArray($(destination+' option').add(selected)).sort(function(a,b){
    return $(a).text() > $(b).text() ? 1:-1;
  });
  $(destination).empty().append(sorted);
}
</script>

<script type="text/javascript">
$(document).ready(function(){
  $('#t1add').click(function(){
    moveSelectedItems('#t1available', '#t1published');
  });
  $('#t1addAll').click(function(){
    $('#t1available option').attr('selected', 'true');
    moveSelectedItems('#t1available', '#t1published');
  });
  $('#t1remove').click(function(){
    moveSelectedItems('#t1published', '#t1available');
  });
  $('#t1removeAll').click(function(){
    $('#t1published option').attr('selected', 'true');
    moveSelectedItems('#t1published', '#t1available');
  });
});
</script>

此示例完全来自以下文章，不幸的是，对于英语使用者来说，该文章是德语的： 在复选框之间移动所选项目。

Answer 4

我们可以这样做：

$('div.buttons').on('click','#add',function(e){
    e.preventDefault();    
    $("#sourceid option:selected").appendTo("#destinationid");
});