如何在具体化 CSS 中监听<选择>更改事件

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

本文关键字：选择 事件 CSS 具体化 监听      更新时间：2023-09-26
当

使用具体化 css 选择下拉列表时，一个简单的 jquery 侦听器似乎不起作用。

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

1） 如何添加侦听器来检测具体化选择元素何时更改？

2）在这种情况下，如何获取选择值？

添加 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 示例在这里

我不确定您如何设置侦听器，但我在这里尝试了代码笔中的基本情况：http://codepen.io/anon/pen/xVZZYy。

只要您将事件侦听器放在<select>元素本身上，它绝对可以检测到更改。

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

<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.
})

这对我有用。

我正在使用带有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}`);
}

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

初始化

材料选择时添加更改事件侦听器

$(document).ready(function(){          
          $('#somedropdown').material_select(someScope.someEvent.bind(someScope));
});
相关文章：