如何使用Jquery獲取隱藏字段上的所有列表框選項？

Question

我有一個兩個列表框，左列表框包含值和右列表框在編譯時沒有任何東西。

<div class="row" style="padding-top:10px;"> 
    <div class="col-lg-3"> 
      <asp:ListBox ID="lstLeft" class="form-control" runat="server" SelectionMode="Multiple" Height="220px"> 
       <asp:ListItem Value="transactions.storeid as StoreID">StoreID</asp:ListItem> 
       <asp:ListItem Value="YEAR(transactions.Time) Year">Year</asp:ListItem> 
       <asp:ListItem Value="MONTH(transactions.Time) Month">Month</asp:ListItem> 
       <asp:ListItem Value="transactionsEntry.TransactionNumber">TransactionNumber</asp:ListItem> 
       <asp:ListItem Value="transactionsEntry.Quantity">Quantity</asp:ListItem> 
       <asp:ListItem Value="items.ItemLookupCode">ItemLookupCode</asp:ListItem> 
       <asp:ListItem Value="CONVERT(varchar, CAST(transactionsEntry.Price AS money), 1)*transactionsEntry.Quantity ExtendedPrice">ExtendedPrice</asp:ListItem> 
       <asp:ListItem Value="departments.Name as DepartmentName">DepartmentName</asp:ListItem> 
       <asp:ListItem Value="categories.Name as CategoryName">CategoryName</asp:ListItem> 
       <asp:ListItem Value="items.SubDescription1">SubDescription1</asp:ListItem> 
       <asp:ListItem Value="suppliers.SupplierName">SupplierName</asp:ListItem> 
       <asp:ListItem Value="suppliers.Code">Code</asp:ListItem> 
      </asp:ListBox> 
    </div> 
    <div class="col-lg-1"> 
      <input type="button" id="left" value="<<" /> 
      <input type="button" id="right" value=">>" /> 
    </div> 
    <div class="col-lg-3"> 
      <asp:ListBox ID="FirstRight" runat="server" SelectionMode="Multiple" Width="100%" Height="220"></asp:ListBox> 
      <asp:HiddenField ID="HiddentxtSelectedColumn" runat="server" /> 
    </div> 
</div> 

當用戶選擇從左邊的列表框列表項，並單擊鼠標右鍵，從左側列表框選擇的項目將移到右列表框中。 Jquery code：

$(function() { 

     $("#left").bind("click", function() { 
      var options = $("[id*=FirstRight] option:selected"); 
      for (var i = 0; i < options.length; i++) { 
       var opt = $(options[i]).clone(); 
       $(options[i]).remove(); 
       $("[id*=lstLeft]").append(opt); 
      } 
     }); 

     $("#right").bind("click", function() { 
      var options = $("[id*=lstLeft] option:selected"); 

      for (var i = 0; i < options.length; i++) { 
       var opt = $(options[i]).clone(); 

       $(options[i]).remove(); 
       $("[id*=FirstRight]").append(opt); 
      } 
     }); 

高興這工作正常。

我有一個隱藏字段HiddentxtSelectedColumn，當用戶單擊right button，它必須得到所有的list box values和comma分隔。

我想這個代碼

var hiddenTextField = ''; 
$('#right').click(function() { 
    alert("Hidden Field = " + hiddenTextField.length); 
    $('#FirstRight option').each(function() { 
     if (hiddenTextField.length > 0) { 
       hiddenTextField = hiddenTextField + "," + $(this).val(); 
     } 
     else { 
       hiddenTextField = $(this).val(); 
       alert("else This =" + $(this).val()); 
     } 
    }); 
    alert("Hidden Field = " + hiddenTextField); 
}); 

我叫hiddenTextField，一旦我得到我的結果，我打算搬到隱藏字段剛剛創建的隱藏字段變量。 但它不能正常工作。

當我第一次點擊按鈕時，提示框「Hidden Field =」爲空。但它必須顯示一些被移動的價值。當我第二次點擊時，它顯示前一個被移動的，並且不顯示第二個。而第三次它顯示出所有的值，並通過多次重複的第一個值 Thaks

Answer 1

這是你的答案

$('#right').click(function() { 
      var options = $("[id*=lstLeft] option:selected"); 

      for (var i = 0; i < options.length; i++) { 
       var opt = $(options[i]).clone(); 

       $(options[i]).remove(); 
       $("[id*=FirstRight]").append(opt); 
      } 

      var hiddenTextField = ''; 
      //alert("Hidden Field = " + hiddenTextField.length); 
      $('#FirstRight option').each(function() { 
       if (hiddenTextField.length > 0) { 
        hiddenTextField = hiddenTextField + "," + $(this).val(); 
        alert("If calling"); 
        //alert("This =" + $(this).val()); 
       } 
       else { 
        hiddenTextField = $(this).val(); 
        alert("else calling"); 
        //alert("else This =" + $(this).val()); 
       } 
      }); 
      //alert("Hidden Field = " + hiddenTextField); 
      $('#HiddentxtSelectedColumn').val(hiddenTextField); 
      alert($('#HiddentxtSelectedColumn').val()); 
     }); 

這將工作肯定