It is at times like these I feel the burden of my novice-level JS skills.
I have a UI requirement that goes something like this:
- display a drop-down list with no value selected
- display a red X next to the drop-down list when a value is selected
- display a new drop-down list below the drop-down list with a value
- if the number of “selected values” equals the maximum amount, stop displaying new drop-down lists
- if a red X is clicked remove the drop-down from the page and move lower selected values up
- if the number of “selected values” is less than the maximum, display a drop-down list at the end of the list
(hopefully I explained that clearly)
I’ve been wracking my brain on how to implement this and coming up with a complete blank.
How can I create a component that inserts itself into the DOM? Is this one component or more? What do I need to consider when implementing this behavior?
Any guidance/advice will be greatly appreciated. Links to online articles would be super cool, too. I want to learn how to implement this, which means understanding how it works.
P.S. I have additional requirements for similar “lists” that add additional fields (date fields, numeric fields) where filling out all the fields causes a new set of fields to get displayed.