it-roy-ru.com

Как прослушать <select> изменения событий в материализации css

Простой слушатель jquery для изменений не работает, когда используется раскрывающийся список материализации css.

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

1) Как я могу добавить слушателя, чтобы определить, когда изменился элемент выбора материализации? 2) Как получить значение выбора в этом случае?

5
user1432882

Добавить идентификатор, чтобы выбрать

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

Привязать прослушиватель событий через jquery, используя идентификатор

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

Надеюсь это поможет :-)

Пример JSFiddle здесь

7
Arunkumar Palanippan

Я не уверен, как вы настраиваете слушателя, но я попробовал базовый случай в codepen здесь: http://codepen.io/anon/pen/xVZZYy .

Он определенно может обнаруживать изменения, пока вы помещаете прослушиватель событий в сам элемент <select>.

5
Acburst

Как вы, наверное, знаете, materialize добавляет свой собственный data-select-id, поэтому любой Id, добавляемый вами в элемент select, сделает его немного нестабильным, что вы можете сделать, это обернуть элемент select в div и присвоить ему идентификатор, а затем использовать jQuery для выбора этого идентификатора. и цепочка элемента выбора, как это .. 

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

Это сработало для меня. 

0
David Najar

К сожалению, materialze.css превращает <select> в поддельное выделение на основе <ul> и нескольких <li>, вы можете попытаться связать события сгенерированным <li>, но это кажется трудным: вы не можете связать событие onchange с materialize.css <select>, если Вы не используете класс browser-default или не ищите немного.

0
Suicideboy

Я использую materialize-css с angular7. Вот как я справился с этим

<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