Как получить все опции списка в Скрытом поле с помощью 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> 

Когда пользователь выбирает элементы списка слева ListBox и нажмите правую кнопку, элементы, которые выбраны из левого списка будет двигаться вправо, чтобы ListBox. Jquery код:

$(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); 
      } 
     }); 

Upto этого работает нормально.

У меня есть скрытое поле 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, когда я получу свой результат, я планирую переехать в скрытом поле. Но это не работает должным образом.

Когда я нажимаю кнопку в первый раз, появляется предупреждающее поле «Скрытое поле =» пустое. Но он должен показать какое-то значение, которое перемещено. Когда я нажимаю второй раз, он показывает предыдущий, который перемещается, и он не отображает второй. И третий раз он показывает, показывающий все значения и, повторяя несколько раз первое значение 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()); 
     }); 

Это будет работать определенно