Develop Reference

Need to fire an event when a select menu closes or hides (disappears from view). Which event can I latch on to, to accomplish this?

Issue:
I have the following dropdown select menu. I am able to fire event onChange or onBlur. But I want to be able to fire an event immediately when the menu closes and not for anything else. How can I latch on to that?
current implementation
The blur works, but the event doesn't fire until I actually click somewhere other than select input field. I need it to fire when the options menu disappears from view
$("select").on("blur", function(event) {
let id = $(this).attr("id");
console.log(id);
//validate.validateInput(this);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="patient_registration-patient-province">
<option class="trn" disabled="" selected="" value="" data-trn-key="select a province">select a province</option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland">Newfoundland and Labrador</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon">Yukon</option>
</select>

Update:
$(document).click(function(event) {
$target = $(event.target);
if($("select").is(":focus") && !$target.closest('#select').length)
console.log("click outside");
});
$("select").on("click", function(event) {
console.log("click option");
})
//$("select").on("mouseleave", () => console.log("left"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select" class="form-control" id="patient_registration-patient-province">
<option class="trn" disabled="" selected="" value="" data-trn-key="select a province">select a province</option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland">Newfoundland and Labrador</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon">Yukon</option>
</select>

You can try this
$(function(){
var closed = false;
$("select").on("blur", function(event) {
if(!closed){
doOnClose($(this));
}
});
$("select").on("change", function(event) {
if(!closed){
doOnClose($(this));
}
});
$("select").on("focus", function(event) {
closed = false;
});
/* do what you need to on close the dropdown menu*/
function doOnClose(e){
let id = $(e).attr("id");
console.log(id);
closed = true;
}
})
hope this will work

Since you are using jQuery you could use the library select2
https://select2.org/programmatic-control/events
it offers (for your case)
select2:closing Triggered before the dropdown is closed. This event can be prevented.
select2:close Triggered whenever the dropdown is closed. select2:closing is fired before this and can be prevented.
If this is to "heavy" just look into the code how this works.

Javascript Post-Render Selection by Value not updating dropdown

I have a drop down list of options which lets my users choose one of a few options. But I want to also include a button that when pressed will select a specific option out of the dropdown list.
This is working but the issue is that the dropdown list isnt showing the updated selection, but if you click on the dropdown list you can see that the selection the button chose is highlighted and is indeed selected.
function onclick() {
document.form.server_select.value = 'Quebec';
}
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
<button onclick="onclick()">Button</button>
When you load the page the first option is displayed in the drop down to the user as seen
and
After pressing the button the dropdown still shows the first option in the list but when clicking onto the dropdown you can see a different option is selected.
I expected the dropdown to also show the new selection.

The code works as expected:
function change() {
document.getElementById('server_select').value = 'Quebec';
}
<form>
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
</form>
<button onclick="change()">Button</button>
But looking at the screenshots, it looks like they are doing a custom dropdown, basically you are clicking on a transparent select, and they are updating their pretty dropdown manually, something like this:
function change() {
document.getElementById('server_select').value = 'Quebec';
}
function change2() {
element = document.getElementById('server_select')
element.value = 'Quebec';
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('change', true, true, window);
element.dispatchEvent(event);
}
function open() {
document.getElementById('server_select').value = 'Quebec';
}
document.getElementById('server_select').addEventListener('change', function(event) {
document.getElementById('value').innerHTML = event.target.value
})
#dropdown {
position: relative;
}
#server_select {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<form>
<div id="dropdown">
<span id="value">Auto Select</span>
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
</div>
</form>
<button onclick="change()">Button</button>
<button onclick="change2()">Button Fixed</button>
You'll have to look at the actual HTML structure of your document to see what you need to update, but use the Button Fixed example to see (basically) what you need to do.

You should avoid using reserved words such as onclick as function name
for list of reserved words please look into https://www.w3schools.com/js/js_reserved.asp
function change() {
document.getElementById("server_select").value = "Quebec";
}
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
<button onClick="change()">Button</button>
<script>
</script>

HTML multiselect without ctrl having limited option

I have found a huge amount of problem-related to my problem. Actually, I have the solution about "without holding Ctrl button to select the option."
For better reference: Selecting multiple from an html select element without using ctrl key
I got the best solution in the following question. But the problem is that I need a function having both
1. without holding the Ctrl button
2. limited the selection option less than 3
Here the code for HTML select element without using ctrl key
window.onmousedown = function (e) {
var el = e.target;
if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
e.preventDefault();
// toggle selection
if (el.hasAttribute('selected')) el.removeAttribute('selected');
else el.setAttribute('selected', '');
// hack to correct buggy behavior
var select = el.parentNode.cloneNode(true);
el.parentNode.parentNode.replaceChild(select, el.parentNode);
}
}
select{
width: 200px;
height: 200px;
}
<select multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
Here the code for limited the option with holding ctrl button:
$("select").on('change', function(e) {
if (Object.keys($(this).val()).length > 3) {
$('option[value="' + $(this).val().toString().split(',')[3] + '"]').prop('selected', false);
}
});
select{
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
But I can't make the two scripts together. I have tried but there only work only "without holding ctrl" script.
Note: I have found other script in jquery to activate "without holding ctrl" in multi-select option. But they didn't send data correctly. The above pure JS is perfect for me :)
Thanks

Your first script allows for multiple selections to be made by clicking without and with CTRL. You don't need to combine anything.

Set text colour based on input type 'select'

I'm trying to set the colour of my text with class t1 with a colour value depending on what select option is chosen. This is the code I have got to:
$('#colour').on('change', function(){
$('.t1').css('color', ':selected").val()');
});
<select id="colour">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="pink">Pink</option>
</select>
Even if I try with something like this it doesn't work:
$('#colour').on('change', function(){
$('.t1').css('color', 'red');
});

I would suggest you to catch the current selection of the select-box with .val() function.
this keyword refers to the select-box while the val() function is displaying actual selection.
$('#colour').on('change', function() {
$('.t1').css('background', $(this).val());
});
.t1 {
height: 100px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colour">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="pink">Pink</option>
</select>
<div class='t1'></div>

Within an event handler callback for a form field, this refers to the field. So $(this).val() gives you the value:
$('#colour').on('change', function() {
$('.t1').css('color', $(this).val());
});
<select id="colour">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="pink">Pink</option>
</select>
<div class="t1">I'm a t1</div>
<div class="t1">So am I</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

It's working when you add your code to the onchange event of HTML.
function onchangeevent(){
$('.t1').css('color', 'red');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colour" onchange="onchangeevent()">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="pink">Pink</option>
</select>
<div class="t1">
text
</div>

Open a page when Mulitple Options Selected

I have multiple select box in Html, I need to validate the options select then open a new page taking me to a page where the teacher's profile and the school selected, I need to create a page for each possible answer.
Select Teacher to Study with and School
<select id="school">
<option value="Once" selected="">One</option>
<option value="Twice">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
<select id="teacher">
<option value="Once" selected="">Sam</option>
<option value="Twice">Micheal</option>
<option value="Three">Manny</option>
<option value="Four">Jenny</option>
</select>

Use this with jQuery
$(function() {
$('#school, #teacher').change(function() {
//You can validate here if you want
var myWindow = window.open("http://yourserver.com/myapp/" + $("#school").val() + "/" + $("#teacher").val(), "MsgWindow", "width=800, height=600");
});
});

Add a onchnge event
HTML:
<select id="school">
<option value="Once" selected="" onchange="toggle();">One</option>
<option value="Twice">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
<select id="teacher">
<option value="Once" selected="" onchange="toggle();">Sam</option>
<option value="Twice">Micheal</option>
<option value="Three">Manny</option>
<option value="Four">Jenny</option>
</select>
JS:
function toggle(){
// to do : your logic goes here
// redirect to new page
}

you can use better approach
var url = "http://yourserver.com/myapp/";
$(function() {
$('#school, #teacher').on("change",function() {
window.open( url + $("#school").val() + "/" + $("#teacher").val());
});
});