Question

我被卡在某处使用jquery从文本框中附加列表框。

这是我的jquery

  $("#btnAddSvc").click(function () {
        var svc = $("#<%= txtServiceName.ClientID %>").val();  //Its Let you know the textbox's value   
        svc.appendTo("#<%=lstSvcName.ClientID %>");
    });

我正在使用asp.net（c＃）来开发我的代码

<asp:Button ID="btnAddSvc" runat="server" Text=">>" Font-Size="Medium" />
<asp:ListBox ID="lstSvcName" runat="server" SelectionMode="Multiple" ToolTip="Selected Service Names"
                Width="169px"></asp:ListBox>

有人可以帮忙，因为我无法获取列表框中的值。

Answer 1

"#<%=lstSvcName.ClientID %>"缺少jQuery选择器$（），因此您将获得id lstSvcName而不是object。

我还更改了append语句，因为它没有正确的语法。

"#<%=lstSvcName.ClientID %>"

将是

$("#<%=lstSvcName.ClientID %>")

您的代码将变为

$("#<%= btnAddSvc.ClientID %>").click(function () {
      var svc = $("#<%= txtServiceName.ClientID %>").val();  //Its Let you know the textbox's value   
      $("#<%=lstSvcName.ClientID %>").append('<option value="'+svc+'">item '+svc+'</option>');
      return false;
});

编辑[OP为ListBox中的唯一项目请求更多功能并清除TextBox]

$("#<%= btnAddSvc.ClientID %>").click(function () {
    var txt = $("#<%= txtServiceName.ClientID %>");
    var svc = $(txt).val();  //Its Let you know the textbox's value   
    var lst = $("#<%=lstSvcName.ClientID %>");
    var options = $("#<%=lstSvcName.ClientID %> option");
    var alreadyExist = false;
    $(options).each(function () {
        if ($(this).val() == svc) {
            alert("Item alread exists");
            alreadyExist = true;
            return;
        }
        txt.val("");
        // alert($(this).val());
    });
    if(!alreadyExist)
            $(lst).append('<option value="' + svc + '">' + svc + '</option>');
    return false;
});

Answer 2

你可以使用jquery操作DOM但是...... 现在有一种更优雅的方式：使用knockoutjs面向对象的方式（使用MVVM - 模型视图ViewModel）

Knockoutjs Nuget Package

您只需将data-bind="options: elements"添加到列表中即可创建对列表的绑定，并且您始终使用对象，从不使用DOM元素，在此示例中我有一个字符串数组，但您可以创建自定义对象并绑定他们只使用语法中的一点变化

这样做的方法是：

<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="Scripts/knockout-2.1.0.js"></script> <script type="text/javascript"> $(function () { var model = { elements: ko.observableArray(), addElement: function () { this.elements.push($("#<%= this.newElement.ClientID %>").val()); } }; ko.applyBindings(model); }); </script> <asp:ListBox runat="server" ID="myListbox" Rows="10" Width="25%" data-bind="options: elements"> </asp:ListBox> <br /> <asp:TextBox runat="server" ID="newElement"></asp:TextBox> <input type="button" id="addElement" value="Add element" data-bind="click: addElement" />

这是输出：

Answer 3

尝试这样的事情。这可能对你有所帮助。为方便起见，更改返回值。

   $('#<%= btnAddSvc.ClientID %>').click(function () {
            $textbox = $('#<%= txtServiceName.ClientID %>');
            $listbox = $('#<%= lstSvcName.ClientID %>');
            $listbox.append($('<option></option>').attr('value', $textbox.val()).text($textbox.val()));
            return false;
        });

使用Jquery从Textbox中添加Listbox中的项目

3 个答案: