У меня есть два окна выбора, теперь я хочу, чтобы я хотел переместить опцию из одного окна выбора в другое с помощью кнопки
ниже мой код:
<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=">>"><br> <input type="button" id="toLeft" value="<<"> </td> <td> <select size="5" id="accquiredMovies" name="accquiredMovies"> <option> No item right now</option> </select> </td> </tr> </table> 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, который работает нормально, но я хочу, чтобы
когда один элемент копируется из одного окна выбора в другой, то этот элемент следует отключить (или, возможно, удалить) из первого окна выбора (чтобы предотвратить дублирование записи). Я также хочу переместить элемент справа налево, пожалуйста, предложите мне оптимизированный jQuery. Благодарю.
если я хочу использовать несколько флажков с обеих сторон? то как я могу это использовать?
если я нажму на элемент на правой панели и переместим его влево selectbox, а дальше дальше (пост), а затем в правом selectbox, ничего не выбрано? то, что мне нужно, находится на правильном selectbox, там все элементы shoud всегда будут выбраны, иначе что мне нужно делать? после того, как я переместил элемент справа налево, мне снова нужно выбрать остальные элементы в правом selectbox и пойти дальше
я использовал ниже код, пожалуйста, взгляните и предложите мне, если кто-нибудь найдет в нем какую-либо ошибку / ошибку. Благодарю Тебя
jQuery('form').submit(function() { jQuery('#accquiredMovies option').each(function(i) { jQuery(this).attr("selected", "selected"); }); });
Вы можете использовать jQuery remove. Подобно:
$('#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($("<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; } } } }
Это также работает для перемещения предметов из одного многопозиционного окна в другое без дублирования. Я wana знаю, как сделать порядок значений одинаковым при перемещении элементов из одного в другой.
Вот хороший пример:
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>
Этот пример полностью из следующей статьи, которая, к сожалению, для англоязычных носителей, находится на немецком языке: переместите выделенные элементы между флажками .
Мы можем сделать так:
$('div.buttons').on('click','#add',function(e){ e.preventDefault(); $("#sourceid option:selected").appendTo("#destinationid"); });