How to add a row to a table from clicking multiselect

Question

I have a select box that once something is click will append a new row in the table below, similar if an item in the select menu is deselected the very same row it added will be removed from the table.

I've got a jsfiddle to explain further what I am trying to do http://jsfiddle.net/Wdj6G/

Answer 1

You can listen to your select box for onchange event, and create a DOM Element for the selected item, store it in a global object (with the select value as key) and add it to your table. When you deselected this item, you can remove the element from the table with the global object.

Answer 2

Onchange event of selection box,get the value and displayed text from selection box; in case of multiple select, loop through all number of selected items; take each of them one by one ; create element TR and TD. append values to TD then append it to TR and finally to table.simailar for removing ChildElement(Row) from table if item is disselected.

Take a look at this for help: DOM