使用 Jquery 从文本框添加列表框中的项目答案

【问题标题】：Using Jquery to add items in Listbox from Textbox使用 Jquery 从文本框添加列表框中的项目
【发布时间】：2012-07-06 17:05:24
【问题描述】：

我被困在某个地方，使用 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>

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

【问题讨论】：

标签： c# javascript asp.net jquery

【解决方案1】：

"#<%=lstSvcName.ClientID %>" 缺少 jQuery 选择器 $()，因此您将获得 lstSvcName 的 id 而不是 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;
});

【讨论】：

现在试试，你在列表框中添加项目的语法错误，现在检查一下
令人惊讶的是，这也不起作用 :( 为什么你包含 5 5 在这里的含义
输入错误，我已经删除了，让我看看为什么它不起作用
它的工作，我不知道为什么不工作在你身边。您是否包含了 jquery 文件？并将此脚本放置在正确的位置。做一些调试它应该可以工作。还从您可能没有最新的答案中获取最新代码。
这是我调试 javascript 的答案，可能会对您有所帮助 stackoverflow.com/questions/10573819/…

【解决方案2】：

试试这样的。这可能会对您有所帮助。为方便起见更改返回值。

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

【讨论】：

非常感谢您的帮助：需要更多帮助如何避免重复并删除删除键时的重复
抱歉耽搁了。这几天我都不想上网了。 @PratikGupta，试试这样的方法来删除$('#<%= btnDelete.ClientID %>').click(function() { $listBox = $('#<%= lstBox.ClientID %>'); $selectedItem = $listBox.find('option:selected'); $selectedItem.remove(); return false; });
@PratikGupta ，只需尝试这些代码行来检查重复条目。我不确定这会奏效。尝试修改一些行并尝试。 $textbox = $('#<%= txtText.ClientID %>'); for (var i = 0, j = selectObject.options.length; i < j; i++) { if(selectObject.options[i].value==$textbox.val()) { alert('This Item already exists'); e.preventDefault(); } }

【解决方案3】：

您可以使用 jquery 操作 DOM 来做到这一点，但是...... 现在有一种更优雅的方式来做到这一点：一种面向对象的方式（使用 MVVM - 模型视图 ViewModel），使用 knockoutjs强>

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" />

这是输出：

【讨论】：