Wednesday 15 October 2014

Listbox mnipulation with jQuery

This is my easy to paste reference code for list-box manipulation using jQuery. By the way, the HTML <input "type"="select"> element, will create what desktop programmers usually refer as a combo-box. To make the input display as a list box, we need to specify an additional size="N" attribute where N refers to the number of visible items of the list.

So, suppose that we have a select input somewhere in an HTML page and that we need to add a button that removes the selected item from the input's options list.

       // remove the selected item from the list box
       jQuery('#deleteButton').click(function(){
            jQuery("#myListBox option:selected").remove();
            return false;
        });

By the same token, we can also create an other button that empties the entire options list

        // remove all items from list box
        jQuery('#deleteAllButton').click(function(){
            // check that there is something to remove
            if (jQuery("#myListBox option").length == 0)
                return false;

            // verify that user really wants to do this
            if (!confirm(''))
                return false;

            // empty list box
            jQuery("#myListBox option").remove();
            return false;
        });
    });

Finally, to add a new item at the end of the options box we can use a code fragment that looks more or less like this:

                    var newOptionhtml ='<option value="'
                        + response.id
                        + '">'
                        + response.name
                        + ' </option>';

                    jQuery("#myListBox").append(newOptionhtml);

Needles to say that all the above have been collected from various Stack Overflow questions and answers.

No comments :