Jquery函数传递选择选项

Question

$('#addAllButton').click(function() { 
      var options = ''; 
      $('#fromList').find('option').each(function() { 
       alert($(this).val()); 
       //options += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>'; 
      }); 
      $('#toList').append(options); 
     }); 

<select id="fromList" name="drop1" class="listBox" multiple="multiple"> 
        <option value="1">item 1</option> 
        <option value="2">item 2</option> 
        <option value="3">item 3</option> 
        <option value="4">item 4</option> 
        <option value="0">All</option> 
</select> 

<select id="toList" name="drop1" class="listBox" multiple="multiple"> 
         <option value="1">item 1</option> 
         <option value="2">item 2</option> 
         <option value="3">item 3</option> 
         <option value="4">item 4</option> 
         <option value="0">All</option> 
    </select> 

我有一个按钮全部添加。我想要这个按钮将fromList选择列表中的每个选项添加到toList。我的功能似乎没有工作，有人能指引我朝着正确的方向吗？

我试图用你的代码SpYk3HH的一部分：

$('#addAllButton').click(function() { 
       //options += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>'; 
       $('#fromList').children().appendTo($("#toList")); 
      }); 

我不能得到这个工作。我有一个名为Add All的按钮，所以当他们点击它时，它会将所有内容从#fromList移动​​到#toList。以上似乎也没有工作。

Answer 1

要移动从第一个列表中的所有选项第二：

$('#addAllButton').click(function() { 
    var options = $('#fromList').find('option'); 
    $('#toList').append(options); 
});​ 

JS Fiddle demo。

如果，因为它来自的意见/答案似乎在其他地方，你要移动所有除了的的option的最后元素，那么：

$('#addAllButton').click(function() { 
    var options = $('#fromList').find('option').slice(0,$('#fromList').find('option').length -1); 
    $('#toList').append(options); 
});​ 

JS Fiddle demo。

参考文献：

• append()。
• find()。
• slice()。

Answer 2

修订

对不起，我花了这么久才这样了，一束疯狂昨晚。无论如何，与节目。

你可以找到this fiddle

工作示例的这种（与按钮点击）我不知道你想要什么，但我设置是添加了一个按钮和一个跨度，让用户代码知道从第一个列表中选择一些东西。我将用评论分解下面的例子。

// this first line is more jQuery updated alternate to $(document).ready(function() {}) 
$(function(){ 
    // next we add a click event to the button 
    $("#btnClick").button().click(function(e) { 
     $("#NothingSelected").hide(); // simply ensure our warning text is closed 
     var $val = $("#fromList").val(); // since this is a multival select list i want to itterate through all selected values 
     // but first 2 checks 
     // Check 1) is it null, aka, nothing is select 
     if ($val == null) { 
      $("#NothingSelected").show(); // displays our span of no selected text help 
      setTimeout(function() { $("#NothingSelected").fadeOut("slow"); }, 3000); // sets a timer to had the no selected span after 3 seconds 
     } 
     else if ($.inArray("0", $val) >= 0) { // check 2) is "all" option selected 
      // The following line would prolly be quickest and easiest way 
      // $("#fromList option:not(:last-child)").appendTo($("#toList")); 
      // However, this will not check for duplicates and will leave you with duplicate options with the same value 
      // So below i itterate through each option in from list and compare it to options in to list 
      $("#fromList option").each(function(i) { // itterate through each option in from list 
       var $this = $(this); // this will use actual option and thus, on append will move the option 
       // change to $this = $(this).clone() if you only want to clone the option 
       if ($this.val() != 0) { // check to make sure the option we are looking at is not the "all" option 
        if ($("#toList:has(option[value="+$this.val()+"])").length > 0) { //check to see if option already exist in too list 
         // here i'll create an "additive" to the value (you can do what you like) of duplicate entries 
         $this.val($this.val() + "-2") 
         // also change text to reflect it 
         .text($this.text() + " -2") 
        }; 
        $("#toList").append($this); // here we move the option or send in the clone if cloned 
       } 
      }); 
     } 
     else { //do other sutff (it's not "all" selected) 
      // I dont know what else you want, so here i'm just simply going to add the current from item to to list 
      for (x in $val) { 
       var fromItem = $("#fromList option[value="+$val[x]+"]"); 
       if ($("#toList:has(option[value="+$val[x]+"])").length > 0) { 
        fromItem.val(fromItem .val() + "-2").text(fromItem.text() + " -2") 
       }; 
       $("#toList").append(fromItem); 
      }; 
     }; 
     // With all that done, lets finally ensure that the 0 val (aka "all") is back at bottom of to list 
     $("#toList option[value=0]").appendTo($("#toList")); 
    }); 
})​; 

Answer 3

嘿伙计尝试使用这可能会有所帮助。

$('#toList').append($('#fromList').html()); 

它将选择选项fromlist里追加到toList

Gudluck兄弟！