Using jquery to add items to a listbox from a text box

Question

I am stuck somewhere using jquery to add a list box from a text box.

here is my jquery

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

I am using asp.net (C #) to develop my code

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

can someone help as i cannot get the values ​​in the list.

Answer 1

The jQuery $ () selector is missing for "#<%=lstSvcName.ClientID %>" , so you get id lstSvcName instead of object .

I also changed the append statement as it does not have the correct syntax.

 "#<%=lstSvcName.ClientID %>" 

will be

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

Your code will become

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

EDIT [Additional Features Requested by OP for Unique Items in ListBox and Clearing TextBox]

 $("#<%= btnAddSvc.ClientID %>").click(function () { var txt = $("#<%= txtServiceName.ClientID %>"); var svc = $(txt).val(); //Its Let you know the textbox 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

You can do it with jquery manipulating the DOM, but ... Now there is a more elegant way to do it: object oriented (using MVVM - Model View ViewModel) using knockoutjs

Nooket Knockoutjs Package

You create a binding to your list by simply adding data-bind="options: elements" to your list, and you always work with objects, never with DOM elements. In this example, I have a string array, but you can create custom objects and bind them using only a small change in the syntax

The way to do this is:

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

This is the conclusion:

Answer 3

Try something like this. This can help you. Change the return value for your convenience.

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