如何在materialize css中监听<select>更改事件

Question

使用materialize css select下拉列表时,一个简单的jquery监听器似乎不起作用.

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

1)如何添加侦听器以检测materialize select元素何时更改？2)在这种情况下如何获得选择值？

Answer 1

添加要选择的ID

 <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>

使用id通过jquery绑定事件监听器

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

希望这可以帮助 :-)

JSFiddle示例在这里

Answer 2

我不确定你是如何设置监听器的,但是我在codepen中尝试了一个基本的例子:http://codepen.io/anon/pen/xVZZYy .

只要将事件侦听器放在<select>元素本身上,它肯定可以检测到更改.

Answer 3

不幸的是，materialze.css 将 a 更改<select>为基于 a<ul>和 multiple的假选择<li>，您可以尝试在生成的事件上绑定事件，但这似乎很困难：如果不使用，则<li>无法onchange在 Materialize.css 上绑定事件类或不要搜索一点。<select>browser-default