Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 607
user1432882 Avatar asked Mar 04 '16 01:03

user1432882


People also ask

Is materialize still supported?

Materializecss is no longer supported · Issue #6615 · Dogfalo/materialize · GitHub.

Does materialize need jQuery?

Unlike Bootstrap, Materialize does not require popper. js. It only requires jQuery. This is all you need to get started.

What is materialize used for?

Materialize is a UI component library created with CSS, JavaScript, and HTML. Materialize UI components help in constructing attractive, consistent, and functional web pages and web apps, while adhering to modern web design principles such as browser portability, device independence, and graceful degradation.


1 Answers

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

like image 109
Arunkumar Palanippan Avatar answered Oct 08 '22 15:10

Arunkumar Palanippan