如何使用jQuery获取“隐藏"字段上的所有列表框选项? [英] How to get all the list box options on Hidden field using Jquery?

问题描述

我有两个列表框，左边的列表框包含值，右边的列表框在编译时没有任何内容.

I Have a two listbox, left listbox contains values and right listbox doesn't have anything while compiling.

<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代码:

When user select the list items from left listbox and click the right button, the items which is selected from left list box it will move to right to listbox. 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分隔.

I have a hidden field HiddentxtSelectedColumn, When user click right button,it has to get all the list box values and seperated by 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的隐藏字段变量，一旦获得结果，我计划移至隐藏字段. 但这不能正常工作.

I just created Hidden field variable called hiddenTextField, once I get my result, I plan to move to hidden field. But it doesn't work properly.

当我第一次单击按钮时，警报框隐藏字段="为空.但是它必须显示出一些被移动的价值.当我第二次单击时，它会显示上一个被移动的内容，而不会显示第二个.第三次显示所有值，并重复第一个值几次 解冻

When I click the button at first time, alert box " Hidden Field = " empty. But it has to show the some value which is moved. When I click the second time, it shows the previous one which is moved, and it doesn't show the second one. And third time it's showing showing all the values and by repeating several times the first value Thaks

推荐答案

这是您的答案

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

这肯定会起作用

这篇关于如何使用jQuery获取“隐藏"字段上的所有列表框选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！