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

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

这是我的jquery

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

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

 >" Font-Size="Medium" />  

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

Answer 1

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

我还更改了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('item '+svc+''); return false; }); 

编辑[OP请求ListBox中的唯一项目和清除TextBox的更多function]

 $("#<%= 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('' + svc + ''); return false; }); 

Answer 2

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

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

Answer 3

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

Knockoutjs Nuget Package

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

这样做的方法是：

这是输出：