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

Javascript - Plugin should not affect all select boxes

I use a JQuery/Javascript plugin which changes select boxes with:
$('select').multipleSelect();
The select boxes look like:
<select multiple=\"multiple\">\r\n" +
<option selected=\"selected\" value=\"1\">January</option>
<option value=\"2\">December</option>
<option value=\"3\">December2</option>
</select>
The probem is that it changes all select boxes on the site but it should change one select box only.
How to do it?

Just give the select you want to select, a class, and then call the plugin on it
<select class="selectMe" multiple="multiple">
<option selected="selected" value="1">January</option>
<option value="2">December</option>
<option value="3">December2</option>
</select>
And then in jQuery
$('select.selectMe').multipleSelect();
You need not define an actual class in CSS, though you can, if you want. From now on, just add class selectMe to the <select> that you want the plugin to be called upon.

Change option value to selected if same url

Good morning,
I have a form
<select name="select" onchange="window.open(this.options[this.selectedIndex].value,'_self')">
<option selected="selected">Select your size</option>
<option value="https://www.webpage.com/01">Size S</option>
<option value="https://www.webpage.com/02">Size M</option>
<option value="https://www.webpage.com/03">Size L</option>
<option value="https://www.webpage.com/04">Size XL</option>
</select>
So if people select size S they go to https://www.webpage.html/01 and so on.....
On al the pages i have the same select form, but how can i change the chosen option as selected="selected" using javascript?
So if people select size M, the go to https://www.webpage.com/02 and that the form is displaying size M on this page. So if option value url is the same as the page url it automaticly give the select="selected" to this option.
maybe a dump question, but javascript isnt my best part ;)
Thanks for all your help.

You can try
$("option[value='" + window.location.href.toString() + "']").closest("select").val(window.location.href.toString());
It will find the option exactly matching with page url

If url exactly corresponds option values
$("selectElementId").val(window.location);

You can achieve this using javascript or jQuery
HTML
<select name="select" id='option' onchange="window.open(this.options[this.selectedIndex].value,'_self')">
<option selected="selected">Select your size</option>
<option value="https://www.webpage.com/01">Size S</option>
<option value="https://www.webpage.com/02">Size M</option>
<option value="https://www.webpage.com/03">Size L</option>
<option value="https://www.webpage.com/04">Size XL</option>
</select>
jQuery solution
$(document).ready(function(){
$('#option').on('change',function(){
$("#option option:selected").attr('selected','selected');
});
});

If you want to do this with JavaScript only, I would recommend you to do this:
add an id attribute to each of the option tags
<option id="sizeS" value="https://www.webpage.com/01">Size S</option>
<option id="sizeM" value="https://www.webpage.com/02">Size M</option>
add a name attribute to the body-tag of each page:
For example, on the page https:.../01:
<body name="S">
add this function to the JavaScript part of each page:
function updateForm() {
var currentSize = document.getElementsByTagName['body'][0].getAttribute('name');
document.getElementById("size" + currentSize).selected = "selected";
}
execute the function updateForm() when loading the page. For example, with onload:
<body name="M" onload="updateForm()">
you can also use an event listener with the "DOMContentLoaded" event, click here for more information:

Using a drop-down multiple times

Is it possible to write a <select> menu and use it in multiple places on web page?
example:
<select id="dm">
<option value="">Select Quantity</option>
<option value="less ">50 - 60</option>
<option value="medium ">61 - 70</option>
<option value="large ">71 - 80</option>
<option value="xl ">Above 80</option>
</select>
How can I use this menu multiple times within the same webpage?

Give the <select> a class and then you can use the jQuery clone() function.
<select class="dropClass" id="dm">
<option value="">Select Quantity</option>
<option value="less ">50 - 60</option>
<option value="medium ">61 - 70</option>
<option value="large ">71 - 80</option>
<option value="xl ">Above 80</option>
</select>
<div id="someDiv"><!-- you want the dropdown here too --></div>
$( ".dropClass" ).clone().appendTo( "#someDiv" );
DEMO

Keep the original in a dummy script block as a template (text/template is not recognized so is ignored).
<script id="dm" type="text/template">
<select>
<option value="">Select Quantity</option>
<option value="less ">50 - 60</option>
<option value="medium ">61 - 70</option>
<option value="large ">71 - 80</option>
<option value="xl ">Above 80</option>
</select>
</script>
Create copies using:
var copy = $('#dm').html();
something.append(copy);
This avoids the unique id issue (as the select has no id). It is also very easy to read/maintain.
As suggested below, if you want to use this in a form, the select must be named:
var $copy = $($('#dm').html()).attr('name', newMenuName);
something.append(copy);
note: The extra $() converts the string to a DOM element first before adding the attribute.

Using a templating engine such as Handlebar or similar would be easy, but might be over kill in your case.
I would simply store the complete HTML code in a variable, and then inject that variable wherever I need it for future use. Problem here is complexity and maintainability of the HTML code. In any case something like this (using jQuery):
JS:
var myDropDown = 'youthtmlcode is here'
$("#myDropDown").html(myDropDown);
HTML:
<div id="myDropDown"></div>

Multiselect dropdown

How do you make a combobox with multiselect option? Using Javascript or HTML. allows you to select multiple options but does not provide a combo/dropdown structure.

That is not standard HTML functionality. There is either a dropdown, or a multiselect. What you can use, is a library that can handle the conversion, like http://harvesthq.github.com/chosen/.

What about this?
<select multiple>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
</select>