Как вызвать изменение выбора с помощью Materialise - PullRequest
Новая
       8

Как вызвать изменение выбора с помощью Materialise

0 голосов
/ 06 мая 2018

На обычном теге select я могу вызвать событие изменения с помощью jQuery, используя $('select').val(2).change(). Это не работает с тегами Materialise select. 

$(document).ready(function() {
  $('select').formSelect();
  
  $('button').on('click', function() {
    //$('select').val(Math.floor(Math.random() * 3) + 1).change(); // Does not work
    
    $('select').val(Math.floor(Math.random() * 3) + 1).formSelect();
  });
});
.wrapper {
  display: flex;
  justify-content: space-around;
  padding: 2rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<div class="wrapper">
  <select>
    <option value="">Selecione</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <button class="btn">Change</button>
</div>

Мне удалось выполнить эту работу, используя $('select').val(2).formSelect(), но я не знаю, является ли это правильным способом, поскольку эта функция используется для инициализации выборок в Materialise, и я не нашел документации об этом. Это «правильный» способ добиться этого или есть лучшие решения?

Спасибо.

1 Ответ

0 голосов
/ 07 мая 2018

Я думаю, что это правильный путь, вам придется заново инициализировать элемент select после изменения его значения

Если вы хотите обновить элементы внутри выбора, просто повторно запустите код инициализации сверху после редактирования исходного выбора. Или вы можете уничтожить выбранный материал с помощью этой функции ниже и создать новый выбор в целом Materializecss Docs 

var select = $('select');
// initialize
select.formSelect();

$('button').on('click', function() {
    // change
  select.val(2);
  // re-initialize material
  select.formSelect();
});
...