(yinelenen önlenmesi ile) başka selectbox bir selectbox seçilen öğeyi taşımak

3 Cevap php

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

Aşağıda benim kodudur:

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

im ki iyi çalışıyor, jQuery yukarıdaki kullanıyor ama, ben istiyorum

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.

UPDATE

i her iki tarafta birden fazla seçme kutusunu kullanmak istiyorsanız? o zaman nasıl ben bu kullanabilirim?

more update

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

solution for my update part

i aşağıdaki kodu kullanılan, bir göz atın ve birisi bu, herhangi bir hata / hata bulursa bana tavsiye lütfen. You teşekkür

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

3 Cevap

JQuery kaldırmak kullanabilirsiniz. Gibi:

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

Fredrik ..

EDIT:

Böyle işlevi optimize olabilir:

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($("<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;
            }
        }
    }
}

Bu da çoğaltma olmadan başka bir çoklu seçim kutusundan öğeleri taşımak için çalışıyor. Ben wana başka select kutusundan diğerine öğeleri hareket ederken aynı değerleri sipariş yapmak için biliyorum.

Burada iyi bir örnek:

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>

Move selected items between checkboxes : Bu örnek, ne yazık ki İngilizce konuşanlar için, Almanca olduğunu aşağıdaki makalede, tamamen olduğunu.

etiketler