CODEWITHSUNDEEP
javascriptjqueryjquery-events
Sig
Sig

Reputation: 5916

Bind event on select option

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/

Upvotes: 0

Views: 3315

Answers (3)

Khabir
Khabir

Reputation: 5854

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

Upvotes: 0

Ullas Hunka
Ullas Hunka

Reputation: 2211

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>

Upvotes: 3

Beginner
Beginner

Reputation: 9095

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>

Upvotes: -1

Related Questions