Develop Reference

Clear multiple select jquery-select2

I am trying to create a reset button for jquery-select2 multiple select. I have no idea why my solution doesn't work.
Html:
<select id="workload-selector" class="js-source-states-2" multiple="multiple" style="width: 100%">
<option value="haha">haha</option>
<option value="haha2">haha2</option>
<option value="haha3">haha3</option>
</select>
<button id="reset">
Reset
</button>
Javascript:
$("#workload-selector").select2();
$("#reset").click(function(){
$("#workload-selector option:selected").removeAttr("selected");
});
I made it on jsFiddle:
https://jsfiddle.net/DTcHh/41975/

The select2 multiple saves value in an array
All you need to do is
$("#workload-selector").val([]).change();

You can just do:
$("#workload-selector").select2('val', '');
Also according to the docs this also works:
$("#workload-selector").val("");
$("#workload-selector").trigger("change");

I have done just that, there it goes a sample of my elaboration
$("#reset").click(function(){
$("#workload-selector").val(null).trigger('change');
});

In the documentation https://select2.org/programmatic-control/add-select-clear-items#clearing-selections saying that I need set null value. When select have multiple choices, it gave me a blank selected option. But if set not exist value, it clear normally for me.
For example:
if in options u have:
<select id="mySelect2" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
This normally clear select.
$('#mySelect2').val(-100).trigger('change');

This works for but single and multi and is according to docs https://select2.org/programmatic-control/add-select-clear-items#clearing-selections
$('#mySelect2').val(null).trigger('change');

How to alert the selected option using javascript or jquery?

I am using a select tag in my code, here is my code,
<select onchange="test(this);">
<option value="0">Select</option>
<option value="1">Select1</option>
<option value="2">Select2</option>
<option value="3">Select3</option>
</select>
and javascript code is here,
<script>
function test(obj)
{
alert($(obj).val());
}
</script>
I want to alert the selected text here, If I use the above code the value of the selected option is coming, but I want to alert the text of the selected option can anyone tell to achive this one.
I want to alert it without using any class or id.
I want to alert it only through the obj.
I am waiting for your help.
Thanks In advance

This should do the trick...
alert($(obj).find("option:selected").text());
That uses the jQuery object $(obj), like you already had, but does a find() which searches the child elements, in this case the selected option.
jQuery find()
:selected pseudo-selector

Try this..
alert($(obj).find("option:selected").text());

you can try this:
alert($(obj).find('option').eq(obj.value).text());
Working jsFiddle

<select id="someid" onchange="test();">
<option value="0">Select</option>
<option value="1">Select1</option>
<option value="2">Select2</option>
<option value="3">Select3</option>
</select>
javascript>
function test(){
var elem = document.getElementById("someid"),
var selectedNode = elem.options[elem.selectedIndex].text;
alert(selectedNode );
}
jQuery>
$("#someid").change(){
alert($(this).find("option:selected").text());
}

Onchange action dropdownlist

When I change the dropdown value, nothing happens?
Is there something wrong with this?
<option value='8' onchange="window.open('availability.jsp?user=99&clickeddate=2013-04-12&month=8','_self')">September</option><
Onchange is the correct action?
Regards

The onChange event is associated with the <select> tag and not with the <option> tag.
Try
<select onChange="window.open('availability.jsp?user=99&clickeddate=2013-04-12&month=8','_self')">
<option>option 1</option>
<option>option 2</option>
</select>

This is because the onchange event needs to be in the parent select element.

How to fire a change event on a HTMLSelectElement if the new value is the same as the old?

I have the following markup:
<select onchange="jsFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
When a user pulls down the combobox and selects the same option that was previously selected (or doesn't change the selection at all), JavaScript doesn't regard it as an onchange event. So, the jsFunction() is not called. But I want the jsFunction() called even in this case. How can I achieve this?

I'd do it like this:
<select onchange="jsFunction()">
<option value="" disabled selected style="display:none;">Label</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
If you want you could have the same label as the first option, which in this case is 1.
Even better: put a label in there for the choices in the box.

You have to add empty option to solve it,
I also can give you one more solution but its up to you that is fine for you or not Because User select default option after selecting other options than jsFunction will be called twice.
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
alert(myselect.options[myselect.selectedIndex].value);
}

Just set the selectIndex of the associated <select> tag to -1 as the last step of your processing event.
mySelect = document.getElementById("idlist");
mySelect.selectedIndex = -1;
It works every time, removing the highlight and allowing you to select the same (or different) element again .

Try this. Just add an empty option. This will solve your problem.
<select onchange="jsFunction()">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>​

For this problem, I have finally put a new <i> tag to refresh the select instead. Don't try to trigger an event if the selected option is the same that the one already selected.
If user click on the "refresh" button, I trigger the onchange event of my select with :
const refreshEquipeEl = document.getElementById("refreshEquipe1");
function onClickRefreshEquipe(event){
let event2 = new Event('change');
equipesSelectEl.dispatchEvent(event2);
}
refreshEquipeEl.onclick = onClickRefreshEquipe;
This way, I don't need to try select the same option in my select.

use the "onmouseup" property with each option element. it's verbose, but should work. also, depending on what your function is actually doing, you could arrange things a little differently, assuming the number is important in the handler:
<select>
<option onmouseup="handler()" value="1">1</option> //get selected element in handler
<option onmouseup="handler(2)" value="2">2</option> //explicitly send the value as argument
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary
</select>

JavaScript code:
on mousedown event: set selectedIndex property value to -1
on change event: handle event
The only drawback is that when the user clicks on the dropdown list, the currently selected item does not appear selected

It's not firing because the value hasn't "changed". It's the same value. Unfortunately, you can't achieve the desired behaviour using the change event.
You can handle the blur event and do whatever processing you need when the user leaves the select box. That way you can run the code you need even if the user selects the same value.

Detecting when the user chooses an option from a dropdown

I have a classic HTML select box:
Show:
<select name="show" id="showThreads">
<option value="all" selected="selected">All</option>
<option value="new">Only unread</option>
</select>
Now, I need JavaScript to make an Ajax request when the user changes the selection in the box (without jQuery).
I have tried:
Listening for clicks on the <option> tags, but it won't work for users using a keyboard or a touch device
on an interval, looping though the <option> tags and checking if the selected one changes, but it seemed to trigger even when I simply hovered over the second option.
Is there a way of doing this that will work on all browsers/devices?
Thanks!

Try the "change" event.
document.getElementById("showThreads").onchange = function() {
};

Listen for onChange on the <select> tag.

function yourAjaxCall(something) {
}
<select name="choice1" size="1" onchange="yourAjaxCall(this);">
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</select>