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兄弟！