1

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.

user12838
  • 62
  • 6
  • Have you tried Using Either `onclick` or use EventListeners? – mrtechtroid Apr 11 '22 at 05:11
  • Yes, but with no luck. My understanding is that – user12838 Apr 11 '22 at 05:13
  • 1
    Use `onchange()` inreplacement for `onclick()` and it should work fine (https://stackoverflow.com/a/3487274/15107474) – mrtechtroid Apr 11 '22 at 05:16
  • 1
    In Firefox this is easy, the selected option is in `event.explicitOriginalTarget` property. But, that property is not standard, and is not implemented in any other browser. You've to keep book of the options having `selected` property set to `true`, then compare the old selecteds to new selecteds in `input` or `change` handler. – Teemu Apr 11 '22 at 05:40
  • @mrtechtroid, I was able to get the onchange() firing on the select element, but no luck in getting it to fire with some knowledge of the most recently selected option element. – user12838 Apr 11 '22 at 05:42
  • @Teemu, so for this to work on (most) browsers, I would need a global array of selected options, and each time the select's onchange() is fired, I compare the current array of selected options to this global array, and the odd one out is the most recently selected? It makes sense that this would work, but seems more troublesome than I would have hoped the solution to be. Thanks. – user12838 Apr 11 '22 at 05:44
  • 1
    Yes. It's not that complicated, though. There's [selectedOptions collection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions), you can convert that to an array (the list is live, you need a static list to compare), then iterate the new array and check whether the current item is included in the old array. – Teemu Apr 11 '22 at 05:50

1 Answers1

0

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)
mrtechtroid
  • 658
  • 3
  • 14
  • It looks like OP knows how to add a change listener, the issue is with `select` type of `multiple`, as the value of the select element will always show up as the value of the first selected option nevertheless which option was actually selected. – Teemu Apr 11 '22 at 07:18