How to force a dropdown list to behave like a list box using javascript

I need to add multiple attribute to a select list, but unfortunately the dropdown list is not editable through HTML since it is a drag and drop feature of a CMS (Spiceworks user portal) I am using.

The CMS is quite outdated; my only other option is to add checkboxes which would make the page extremely long, since there are a total of 15 options to select. (In my example, this is different)

There is no listbox option in the CMS, which is why I need to use javascript to force the dropdown to act like a listbox.

Please look here at what I tried to do: https://jsfiddle.net/jamiedewitz/sdyn0xqz/

Is there a way to force javascript to add the multiple attribute to the dropdown list or is this just wishful thinking?

Solution

Sure

const addMultiple = select => select.setAttribute('multiple', true);

You can then use a CSS selector to target one or multiple elements

addMultiple(document.querySelector('#custom_ticket_form_field_55'))

document.querySelectorAll('select').forEach(addMultiple)

By the way, id="custom_ticket_form_field_55" is used in multiple places in your HTML, so actually the first variation wouldn't work. If you can, try to make your ids unique.

Note that it also breaks accessibility because your label doesn't point to the select anymore.