How to listen on <select> change events in materialize css

user1432882 picture user1432882 · Mar 4, 2016 · Viewed 19.8k times · Source

A simple jquery listener on change doesn't seem to work when use a materialize css select dropdown.

 $("#somedropdown").change(function() {
         alert("Element Changed");
      }); 

1) How can I add a listener to detect when a materialize select element has changed?

2) How do I get the select value in that case?

Answer

Arunkumar Palanippan picture Arunkumar Palanippan · Nov 18, 2016

Add an id to select

 <select id="select1">
  <optgroup label="team 1">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </optgroup>
  <optgroup label="team 2">
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </optgroup>
</select>

Bind event listener through jquery using the id

$("#select1").on('change', function() {
    console.log($(this));
});

Hope this helps :-)

JSFiddle Example Here