Как получить все параметры списка в скрытом поле, используя 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:

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

Я только что создал переменную Hidden field hiddenTextFieldКак только я получу свой результат, я планирую перейти в скрытое поле. Но это не работает должным образом.

Когда я нажимаю кнопку в первый раз, окно предупреждения "Скрытое поле =" пусто. Но он должен показывать некоторую ценность, которая перемещается. Когда я нажимаю второй раз, он показывает предыдущий, который был перемещен, и не показывает второй. И в третий раз он показывает показ всех значений и повторяя несколько раз первое значение

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

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