Bind event on select option

Question

I have the following HTML

<select>
  <option value="">filter</option>
  <option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
  <option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>

and I need to fire up a Javascript callback when any of the options is selected.

I have the following piece of Javascript:

$(function() {
   $(document).on("EVENT", "[data-behavior~=toggle-visibility]", function() {
   ...
  });
});

Is there an event I can use to achieve my goal?

PS - I understand I could move data-behavior="toggle-visibility" to the select tag and then listen for change and get the currently selected value. However, since that piece of Javascript is already used with other elements, I need to keep the data-behavior attribute on the options.

It should work here https://jsfiddle.net/xpvt214o/535895/

_“I need to keep the data-behavior attribute on the options”_ - well then leave it there, and in your change handler on the select element first of all check whether the currently selected option is one with that attribute - if so, proceed with whatever needs doing, otherwise don’t ... — CBroe, Aug 02 '18 at 11:42
The goal here is not just to make it work. I understand how to make it work. I am trying to adapt the same piece of code I already have to a new requirement. And, in the code I already have I get additional attributes from the element with `data-behavior~=toggle-visibility`. — Sig, Aug 02 '18 at 11:49
Pretty sure that won’t work, browsers don’t fire some events on option elements, see f.e. https://stackoverflow.com/questions/1402227/ — CBroe, Aug 02 '18 at 11:54
@CBroe think so too, but before replacing the select with something else I'd like to make it sure. Thanks — Sig, Aug 02 '18 at 12:02
Not sure what your higher level objective is but if it is to hide/show options that is not supported cross browser either the same way events aren't supported — charlietfl, Aug 02 '18 at 12:03
As mentioned multiple times, this piece of code is used by other DOM elements, which don't have `value`. — Sig, Aug 02 '18 at 12:06

Ullas Hunka · Answer 1 · 2018-08-02T12:04:32.040

3

You should be using on change event instead:

The example is as follows:

$("select").on("change", function(e) {
  var sel = $(this).find(":selected");
  var attr = sel.attr("data-behavior");
  console.log(attr + "....." + $(this).val())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="">filter</option>
  <option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
  <option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>

edited Aug 02 '18 at 12:04

answered Aug 02 '18 at 11:38

Ullas Hunka

2,119
1
15
28

As mentioned in the PS, I need to add the listener to the `option` and not to the `select`. – Sig Aug 02 '18 at 11:44
I believe that is not possible, but you can create your own custom drop down using li ul or divs – Ullas Hunka Aug 02 '18 at 11:47
But you can use onmouseup event for this. I have updated have a look. – Ullas Hunka Aug 02 '18 at 11:49
You are still putting it on the select. I have tried on my code and it does not work. – Sig Aug 02 '18 at 11:52
Can you please create a jsfiddle with scenario used by you? – Ullas Hunka Aug 02 '18 at 11:52
text says use change event but code shows `mouseup` which makes no sense on ` – charlietfl Aug 02 '18 at 12:00
@charlietfl that was the alternative suggestion suggested to the user in accordance to the comments received – Ullas Hunka Aug 02 '18 at 12:04
Using `mouseup` makes no sense. Will fire more than once. Once when you open the ` – charlietfl Aug 02 '18 at 12:09

score 0 · Answer 2 · answered Jan 07 '22 at 11:17

Html Code:

<select id="maker-list">
  <option value="">filter</option>
  <option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
  <option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>

JavaScript code:

$('#maker-list').off('change').on('change', e => {
  
  selectedValue = $('#maker-list').val();
  // Here you can call another function with selectedValue
});

In above JavaScript Code, we bind change even and unbind the same event after selecting value so that it will not fire twice. jquery help

score -1 · Answer 3 · answered Aug 02 '18 at 11:42

-1

I hope this will work ... happy coding :)

$("select").on("change", (e) => {
  console.log(e.target.value)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="">filter</option>
  <option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
  <option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>

answered Aug 02 '18 at 11:42

Learner

8,379
7
44
82

As mentioned in the PS, I need to add the listener to the `option` and not to the `select`. – Sig Aug 02 '18 at 11:44
so what ever the option you are selected you need to add a listener – Learner Aug 02 '18 at 11:47

Bind event on select option

3 Answers3