Add Items to ListBox with TextBox by using jQuery

Introduction

In this guide, we'll explore a simple yet powerful method of enhancing user interactions on your ASP.NET website. Learn how to dynamically add city names from a textbox to a listbox using jQuery, and enable users to seamlessly remove them. Follow along to implement this functionality and elevate your web development skills.

HTML Markup - Design Setup

In your WebForm1.aspx page, incorporate the necessary controls - a textbox, a button, and a listbox. Include the jQuery file in the header section to unlock its magic.

<span id="spCity"></span>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
<asp:Button ID="btnAdd" runat="server" />


<a href="#">Remove City<a>
<asp:ListBox ID="listBoxCity" runat="server" CssClass="list-group" 
         style="border:0px; overflow-y:hidden; height:83px; width:300px;">

jQuery : Add TextBox to Listbox

In the jQuery code below, I’m applying a condition that allows up to 10 city entries. If you enter the 11th city name, it will give an error message. If you want to remove a city from the listbox that you added, simply select the city name from the listbox. There is an anchor tag that will be hidden by default, but it will enable and show as “Remove City” when you click it.

<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
 $(document).ready(function(){
   var count = [];
   var i = 0;
   $("#btnAddAdd").click(function () {        
   var txt = $("#txtCity").val();
   $('[id$=listBoxCity]').show();
    if (jQuery.inArray(txt, count) != "-1") {
      $("#spCity").text('City alread exists');
   } else {
     var listCount = $('[id$=listBoxCity] option').length;
     if (listCount <= 10) {
      count[listCount] = txt;
      var alreadyExist = false;
      $('[id$=listBoxCity] option').each(function () {
       if ($(this).val() == txt) {
        $("#spCity").text('City alread exists');
        alreadyExist = true;
        return;
      }
    });
   if (!alreadyExist) {
   $('[id$=listBoxCity]').append($('<option></option>').attr('value', count[listCount]).text(txt));
  }
 } else {
  $("#spCity").text('10 City limit exceed');
  }
 }
});
});
</script>

jQuery : Enable Remove City Button

By default this remove city button disable, and this button appears when user select listbox items.

//Remove Value from the List
        $('[id$=listBoxKeywords]').click(function (e) {        
            var $target = $(e.target);
            if ($target.is('option')) {
                $("#arkyw").show();            
            }
        });

jQuery - Enable Remove City Button:

After selecting items from listbox just click on remove button to remove permanently from the listbox

$("#arkyw").click(function () {
            var a = $('[id$=listBoxKeywords] option:selected').val();
            var id = $('[id$=listBoxKeywords] option').length;
            //alert('ListCount : ' + a);
            //alert('Total List Item : ' + id);
            //alert('After Remove : ' + count[a-1]);
            count = jQuery.grep(count, function (e) {
                $('[id$=listBoxKeywords] option:selected').remove();
                return e != a;
    
            }); 

Conclusion

By implementing this jQuery-powered solution, you've now empowered your ASP.NET website with dynamic city management. Users can effortlessly add and remove cities, providing a seamless and interactive experience. Download the source code here to enhance your web applications further. Elevate your web development journey with this user-friendly feature.