0

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?

Jamie
  • 1,579
  • 8
  • 34
  • 74

1 Answers1

1

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.

geoffrey
  • 2,080
  • 9
  • 13
  • Oh shoot, you're right. I didn't even notice that the id was also the id on the li that the select list is in. I really wish I could update the ids, but I don't even have access to that. The form builder I'm using is probably the most outdated thing I've ever used. Thank you so much for your help, this works perfectly! – Jamie Apr 21 '21 at 17:16
  • 1
    This makes me think that your CMS won't expect multiple values. I hope you will be able to make it work server-side. – geoffrey Apr 21 '21 at 17:25
  • Me too, unfortunately. I'll give it another hour and if not, I will resort to using the dreaded checkboxes. Thanks again! – Jamie Apr 21 '21 at 17:26
  • I was able to get the code to work! Here is what I'm using, and it doesn't affect any other select list on the page either! Thank you so much for your help! `const addMultiple = select => select.setAttribute('multiple', true); addMultiple(document.querySelector('select#custom_ticket_form_field_55'));` – Jamie Apr 22 '21 at 13:54
  • Nice one! Maybe test it with *many* browsers because if it is not standard, they may resolve the query with different heuristics – geoffrey Apr 22 '21 at 14:15
  • Good idea. Thank you so much. – Jamie Apr 22 '21 at 16:35