web-dev-qa-db-ja.com

マテリアライズCSSで<select>変更イベントをリッスンする方法

マテリアライズcssselectドロップダウンを使用すると、変更時の単純なjqueryリスナーが機能しないようです。

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

1）マテリアライズ選択要素が変更されたことを検出するリスナーを追加するにはどうすればよいですか？

2）その場合、どのように選択値を取得しますか？

javascriptjquerycssmaterialize
6
user1432882

選択する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の例はこちら

8
Arunkumar Palanippan

リスナーをどのように設定しているかはわかりませんが、ここでcodepenの基本的なケースを試しました： http://codepen.io/anon/pen/xVZZYy 。

イベントリスナーを<select>要素自体に配置する限り、変更を確実に検出できます。

5
Acburst

ご存知かもしれませんが、マテリアライズは独自のdata-select-idしたがって、select要素にIDを追加すると、動作が少し不安定になります。実行できるのは、select要素をdivでラップし、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.
})

これは私のために働いた。

1
David Najar

残念ながら、materialze.cssは<select>を<ul>と複数の<li>に基づいて偽の選択に変更します。生成された<li>でイベントをバインドしようとすることはできますが、難しいようです。 ：<select>クラスを使用しないか、少し検索しないと、materialize.css browser-defaultでonchangeイベントをバインドできません。

0
Suicideboy

私は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}`);
}
0
Sunil Garg

マテリアル選択を初期化するときに変更イベントリスナーを追加します

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