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 :
Post a Comment