将所选项目从一个选择框移动到另一个选择框（具有重复的预防） [英] move selected item from one selectbox to another selectbox(with duplicate prevention)

问题描述

我有两个选择框，现在我想要的是
i想通过一个按钮将选项从一个选择框移动到另一个选项

i have two select box, now what i want is i want to move option from one select box to another via a button

下面是我的代码：

<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

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>");
    }           
    });         
});

im使用上面的jQuery，这是正常工作，但我想要

i m using above jQuery, that is working fine but, i want that

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

when one item is copy from one select box to another select box, then that item should be disable(or probably delete) from first select box (to prevent duplicate entry). i also want to move item from right to left select box please suggest me optimized jQuery . Thanks.

如果我想使用双方的多个选择框？那么我如何使用它？

if i want to use multiple select box on both side? then how do i use that?

如果我点击rightselectbox上的一个项目并移动它向左选择框，
然后进一步（发布）然后在右选择框，没有选择项目？
我需要的是右选择框，所有项目都将被选中，
否则我需要做什么？在我将项目从右到左移动后，我再次选择右侧选择框上的其余项目，并进一步执行

if i click on a item on rightselectbox and move it to left selectbox, and go further(post) then on right selectbox, there is nothing selected items?? what i need is on right selectbox, there all items shoud be always selected , otherwise what i need to do? after i move an item from right to left ,i again have to select rest of items on right selectbox and go further

我使用下面的代码，请看看，建议我，如果有人发现任何错误/错误。感谢你

i used below code, please take a look and suggest me if somebody finds any mistake/error in this. Thanking You

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

推荐答案

可以使用jQuery remove。喜欢：

You could use jQuery remove. Like:

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

.. fredrik

..fredrik

编辑： strong>

您可以优化这样的功能：

You could optimize the function like this:

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

这篇关于将所选项目从一个选择框移动到另一个选择框（具有重复的预防）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！