I have a multiselect bootstrap picker and would like to find the specific option that was just selected. For example, if I have the picker set to something like this:
<select class="form-select selectpicker" multiple aria-label="Default example">
<option value="Apple">Apple</option>
<option value="Cherry">Cherry</option>
<option value="Papaya">Papaya</option>
<option value="Kiwi">Kiwi</option>
</select>
When the user selects their first option, "Cherry", I would like to alert("Cherry"). When the user then selects their second option, "Apple", I would like to alert("Apple").
I have tried to use the option:selected:last value, but this only works to display the last option in the array of selected option. I would like to display the option that was most recently selected, regardless of its place in the array of selected options. Any insight is greatly appreciated.
EDIT: This questions was closed due to being marked as similar to the question found here: Get selected value in dropdown list using JavaScript
After looking through all of the provided answers in that link, I am not convinced that the questions are the same. I would like to get the most recently selected text in a multiselect picker, not the only selected option in a single select. So, if a user has both Apple and Papaya options selected, but selected the Apple option after selecting the Papaya option, I would like to alert("Apple"). Thanks.
Here Are Two Methods By which you can Use Alert.
First Method: With OnChange
<select class="form-select selectpicker" multiple aria-label="Default example" onchange = "alert(this.value)">
<option value="Apple">Apple</option>
<option value="Cherry">Cherry</option>
<option value="Papaya">Papaya</option>
<option value="Kiwi">Kiwi</option>
</select>
Second Method: Involves An Event Listener But Its Doing The Same Thing(Javascript)(Assuming That The ID of The Select Tag is selector
function change(){
alert(this.value)
}
document.getElementByID("selector").addEventListener("onchange",change)