将所选项目从一个选择框移动到另一个选择框（具有重复预防）
我有两个选择框，现在我想要的是我想通过按钮将选项从一个选择框移动到另一个选择框
下面是我的代码：
PHP
Select Movie sholay Jism Rog Zeher Awarpan Paap paanch no entry
No item right now
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(""+txt+""); } }); });
我使用上面的jQuery，这工作正常，但我想要那样
当一个项目从一个选择框复制到另一个选择框时，该项目应该从第一个选择框禁用（或可能删除）（以防止重复输入）。 我也想从右到左移动项目选择框请建议我优化jQuery。 谢谢。
UPDATE
如果我想在两边使用多个选择框？ 那怎么用呢？
更多更新
如果我点击右侧选择框上的项目并将其移动到左侧选择框，然后进一步（发布）然后在右侧选择框上，没有选择项目？ 我需要的是在右侧选择框，所有项目应始终被选中，否则我需要做什么？ 在我从右向左移动项目后，我再次必须在右侧选择框中选择其余项目并继续前进
我的更新部分的解决方案
我使用下面的代码，请看看并建议我，如果有人发现任何错误/错误。 感谢您
jQuery('form').submit(function() { jQuery('#accquiredMovies option').each(function(i) { jQuery(this).attr("selected", "selected"); }); });
你可以使用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'); } }); }); });
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($("", {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; } } } }
这也适用于将项目从一个多选框移动到另一个多选框而不重复。 我知道如何在将项目从一个选项框移动到另一个选择框时使值的顺序相同。
这是一个很好的例子：
HTML：
jQuery的：
这个例子完全来自下面的文章，不幸的是，对于说英语的人来说，这是德语： 在复选框之间移动所选项目 。
我们可以这样做：
$('div.buttons').on('click','#add',function(e){ e.preventDefault(); $("#sourceid option:selected").appendTo("#destinationid"); });