переместить выбранный элемент из одного окна выбора в другое окно выбора (с предотвращением дублирования)

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. Спасибо.

UPDATE

если я хочу использовать множественное поле выбора на обеих сторонах? тогда как мне это использовать?

больше обновлений

, если я нажму на элемент в правом поле выбора и переместу его в левое поле выбора, и идти дальше (пост), то на правой панели выбора ничего нет выбранных элементов ?? то, что мне нужно, находится в правом окне выбора, там все элементы должны быть всегда выбраны, иначе что мне нужно сделать? после того, как я переместил элемент справа налево, мне снова нужно выбрать остальные элементы в правом окне выбора и идти дальше

решение для моей части обновления

Я использовал приведенный ниже код, пожалуйста, посмотрите и предложите мне, если кто-то найдет какую-либо ошибку / ошибку в этом. Благодарю вас

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

Answer 1

Вы можете использовать JQuery удалить. Как:

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

.. Фредрик

EDIT:

Вы можете оптимизировать функцию следующим образом:

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

Мы можем сделать так:

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

Answer 3

    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 4

Вот хороший пример:

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>

Этот пример полностью взят из следующей статьи, которая, к сожалению для англоязычных, написана на немецком языке: Перемещение выбранных элементов между флажками .