Develop Reference

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?

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.

Disable SortableJS's selecting and programmaticaly select elements

I'm having troubles with SortableJS's selecting system (mainly the MultiDrag plugin). I want to be able to programmaticaly select and deselect the elements that are to be dragged, but also want to disable the built-in click-selecting. In other words, I want to disable the click-to-select functionality of SortableJS AND MultiDrag and only select the items via the provided select and deselect functions. I tried fiddling with the code myself but it's a bit too convoluted for my understanding and I couldn't find where the actual selecting is happening and how the MultiDrag plugin is keeping track of the selected items. Does anyone have experience with this? Thank you.

You need to prevent the deselection on the item clicked.
Eg
$(element).on('pointerup mouseup touchend', function(event){
event.stopPropagation();
});
See https://github.com/SortableJS/Sortable/issues/1612#issuecomment-533777362

select drop down not showing

I have a very complicated Javascript/JQuery Leaflet map. There is supposed to be a Leaflet control with a dropdown select box. The select box pulls it's content via AJAX. It pulls the content correctly and the generated HTML is fine and can be seen. If I use the keyboard to highlight the select menu, I can use the arrow keys to change the value. However, I can't click on the select menu and see the drop down box. The click is being captured fine(checked with JQuery .click()).
I can't share the specific code because I'm not sure what's wrong and I can't share the whole thing because of security issues. So, my question is a little more general:
What kinds of errors/bugs should I be looking for if a select dropdown menu is not showing on click? What are various things I can check to see what is wrong?
Thanks.

Nevermind - known issue with Leaflet. Custom Control not working

Combo box in HTML using Javascript/JQuery

I am looking for a plug-in or way to duplicate the default combo box from visual studio in C#, where you can select from a list or type in a new value. I have found several plugins to "search" or act as an autocomplete for a select element, but I want the user to be able to see all options at any time through the drop down, and add their own through the text bar (or select an option then edit it, to either make a new option or permanently alter the selected option).
Does anyone know such a plugin?

I found this the other day, seems like it would meet your requirements: http://harvesthq.github.com/chosen/
(NOTE: I haven't used it yet so I can't comment on how well it works)

Custom dropdown box using javascript and css

Is it possible to create a custom dropdown box using javascriit and css.
for which i need to place a background-image for dropdown box using javascript
If yes or no ? if yes . give any suggestion ?
without using JQuery

You can check out jQTransform

Here is a good tutorial on creating custom drop-down.
JQTransform (as suggested by Olafur) is sufficient for me. But if you need more control such as adding icons, it's worth looking at the tutorial.

This might be overkill; but SproutCore gives you input elements composed from images instead of from native HTML elements. There are probably other frameworks that do similar things.
The basic idea is to create a div or something, as CrazyJugglerDrummer suggests, and put click handlers on it. The handlers set up animation to mimic a select element. And when one of your pseudo-select items is selected, you use JavaScript to send that value to an actual select or input element that is hidden.