is there any plugin that can link a list of textboxes to a select dropdown and keep them in sync

Question

i have a list of textboxes in a column of a html table. The table has an "Add" and "Remove" button next to it which (when clicked) will add new rows or delete existing rows.

I would like to have a dropdown select on my page that is essentially linked to this array of textboxes, listing out the values of the list of textboxes so:

1. if i delete a textbox, that value should get removed from my dropdown
2. If i add a new row (and thus a new textbox), that value should get added to my select
3. As i edit the name in one of the textboxes, the select dropdown will update itself to be in sync with my editing keystrokes.

Is there any jquery plugin that will help with this syncronization. any ideas on how to do this without getting insanely complicated?

Answer 1

Well, I think for the specific task like this, you can make it by yourself. I will try to help you with the algorithm

1. At page load, parse table, get all textboxes and it's value, then build the dropdown element using those value. For this task, there are plugin to help you.
2. When row deleted, put an event handler in delete button, then use the above plugin to delete the option from dropdown
3. Do same thing for add new row and editing existing textbox value. It's better to have button beside textbox that need to be clicked in order to update the textbox, rather than update the dropdown's options while typing, so you just need to bind the click event in that button to update dropdown's options.

If you still have problems, paste your code here, so other can help you.

I hope this idea help you.