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.