的PHP

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。感谢。

更新

如果我想在两边使用多个选择框？那怎么用呢？

更新

如果我点击右侧选择框上的项目并将其移至左侧选择框，并进一步（发布）然后在右侧选择框，没有选择项目？我需要的是在右侧选择框，所有项目应始终选择，否则我需要做什么？在我从右向左移动项目后，我再次必须在右侧选择框中选择其余项目并进一步

我的更新部分的解决方案

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

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

Answer 1

你可以使用jQuery删除。像：

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

..弗雷德里克

修改

您可以像这样优化功能：

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

这是一个很好的例子：

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 。

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

我们可以这样做：

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

将所选项目从一个选择框移动到另一个选择框（具有重复预防）

的PHP

的Jquery

更新

更新

我的更新部分的解决方案

4 个答案: