What's a good way to implement this feature?

1

So I have a “Bars” table in my database and a “Add a Bar” form which allows a bar owner or manager to add his/her business listing to my website database. I also have a “Beers” table in my database and I want the owner/manager of the bar, when entering his/her bar info, to be able to pick how ever many beers from my database that they serve at the business.

I originally was thinking a drop-down menu but that’s no good because that will only allow them to pick one. What if they want to add 20? Do you have any code suggestions for me? I don’t even know what this is called, but I think it would be cool to have a drop-down and then a regular list and as they select beers from the drop-down, the regular list gets populated and then eventually all of the beers they chose are saved into the database and associated with the bar. My front-end is weak, so please give me any advice you have.

2

There are a few different js options available. The one that comes to my mind is called multiselect which I think is part of jqueryUI, but it might be a jqueryui plugin.

If you look on a website called jqueryrain and search for multi select, a number of libraries will come up.

I hope this helps.

1 Like
3

Another option would be to use a select element and set the multiples attribute to true. This allows the user to select more than one option from the list. Hope this helps.

1 Like