Question

在使用materialize css select下拉列表时，一个简单的jquery监听器似乎无法正常工作。 $（＆＃34;＃somedropdown＆＃34;）。change（function（）{ 警报（＆＃34;元素已更改＆＃34;）; }）; 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 Example Here

Answer 2

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

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

Answer 3

不幸的是，materialze.css将<select>更改为基于<ul>和多个<li>的假选择，您可以尝试绑定生成的<li>上的事件但是看起来很难：如果你不使用onchange类或者不搜索一点，你就无法在materialize.css <select>上绑定browser-default事件。

Answer 4

正如您可能知道的，实现添加了它自己的data-select-id，因此您添加到select元素的任何ID都会使其行为有点不稳定，您可以做的是用div包装您的select元素给它一个ID然后用jQuery来选择那个id并链接select元素就像这样..

<div id="select1">
 <select >
  <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>
</div>

和

$('#select1 select').on('change', function(){
    console.log("option selected!")
    // do your stuff here.
})

这对我有用。

Answer 5

初始化材质选择时添加更改事件侦听器

$(document).ready(function(){          
          $('#somedropdown').material_select(someScope.someEvent.bind(someScope));
});

Answer 6

我正在使用带有angular7的materialize-css。这就是我的处理方式

<div class="input-field col s12">
    <select #qwcSelect (change)="optionChanged($event)">
        <option value="" selected disabled>{{placeHolder}}</option>
        // options
    </select>
    <label>{{label}}</label>
</div>

以及在我的组件中

optionChanged(event) {
   console.log(`Selected Value ${event.target.value}`);
}

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

6 个答案: