Develop Reference

Drop-in replacement for "select" element?

I need to control a <select> element (open it, navigate through its options, select value etc) using javascript.
As this is impossible(JS cannot open a <select> element) I wonder: Is there a drop-in replacement that looks the same(keeps the native UA styling of a real select element) and works the same(i.e. in forms, keyboard navigation (up/down) ), except it can be controlled more by JS ?
More background:
I have an ElectronJS based application and until now I used native OS keyboard events to control the <select> element but since the latest update of the OS( Mac Mojave) native keyboard events are no longer allowed so I have to use JS only. The app is quite big so I'm trying to minimise the amount of work to replace native <select> menu with a custom one.

If you want to set the value of a select input, then you can do that using vanilla javascript.
Given a select element like this:
<select id="my-select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
You can use the following javascript to change the value:
document.getElementById('my-select').value = 'saab'
<select id="test-select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<button onClick="document.getElementById('test-select').value = 'fiat'">Click me</Button>

you can use select2 library
https://select2.org/
with search

Accessible Select List Read all Options

HTML5: I have a multi-select list that I need to make accessible. Since it's a native control, it works fine. The problem is that they want the assistive technology to read all of the options when the page is loaded. So far, I have not found a way to make it read them. If they select an option, it will read the text and say option "xx" out of "xx", but it is not enough. Has anyone found a way to make assistive technology read the options upon loading the page? This customer is mainly using JAWS to help navigate the pages.
Here is the test html that I've been playing around with so far.
<select id="testing" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>

As long as you use a native control, you should not reprogram its normal behaviour. That's common accessibility.
You could perfectly add a label or an aria-label listing all the choices:
<label for="testing">
Choose one or more elements in the list: One two three four
</label>
<select id="testing" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>

Select Box Running Change Function With Size Attribute

I am working with select box. I use select box like as below:
<select name="cars" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<script>
function jsFunction(){
console.log($(.names).val());
}
<script>
The combo is look like as below:
THis function is working when the comboboz is chenged.But i want to show all option at the same time. But i don't want to use multiple option select. So that i used size option like as below:
<select name="cars" size="4" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
And then the select box look like as below:
And only only one option can selected. But my problem is not working function. When i use size attribute, and then the function is not triggered when selectbox is changed. When i remove this size, and then the function is triggered.
How can i show all option at the same time (without multiselect) without using size attribute ? Or how can i trigger this function with size attribute ?

Your JavaScript function shouldn't log anything at all, as it has a syntax error. $(.names) needs quotes around names. Also, it needs to reflect the class of your <select>.
First you need to add the class names to your select:
<select name="cars" size="4" class="names" onchange="jsFunction()">
And then add quotes around your jQuery DOM target:
console.log($('.names').val());
Here's the new code:
function jsFunction() {
console.log($('.names').val());
}
<select name="cars" size="4" class="names" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
I've created a fiddle showcasing this here.
Hope this helps!

Is it possible to add an horizontal scroll bar to an html select box? [duplicate]

This question already has answers here:
How to get horizontal scroll bar in select box in IE?
(2 answers)
Closed 9 years ago.
I have below html code.
<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvoooooooooooooooootooooooolargeeeeeeeeeeee</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
The problem is when it goes beyond the page then it gives vertical scroll bar. But the problem is if the value is too large then select box width is auto expanded to accommodate the width of the value. But i don't want it to expand. I want a horizontal scrollbar to come if the option value is too large.
How can I do that?

As others have said, this is not possible. However, there is no need for a scrollbar on the option list if your goal is simply to make the select small while keeping the options fully visible. If you limit the width of your select through CSS, you will see that the browser automatically makes the whole width of the option list visible.
select { width: 100px; }
Edit: See my previous answer on this topic. Firefox, Chrome, and IE10 will make the option list wider than the select if necessary, but IE9 will not. The other answers to that question link to this question with fixes for old IE: Dropdownlist width in IE.

You can't. The native controls are completely governed by the browsers HTML renderer. You'll need to look at a <select> styling plugin if you want to style the dropdown.

Unfortunately you cant do horizontal scrollbars using the default select boxes. You could try using a javascript replacement like Select2 or Chosen. Both of these allow you to format the dropdown options with CSS and you should be able to control their formatting however you like.

add option to select menu at the beginning of the menu

How can I add an option to a menu at the begining of the select menu?
I know the append will add the end
SomeSelectMenu.append(NewElement);
But how will I add at the beginning?
Here is an example:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Please specify an answer with Jquery and one without (if possible)
Thanks

You are so close! :)
.prepend( content, [content] )
$('select').prepend('<option value="i-came-first">Hey!</option>');
http://api.jquery.com/prepend/