如何使用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()); 
     }); 

这将工作肯定