Измените значение поля materialize select по jquery

Ответ 1

Кажется, что я работаю нормально, меняя первый снимок, сбрасывает значение второй капли вниз до 1.

Я сделал грубую реализацию в jsFiddle: http://jsfiddle.net/55r8fgxy/1/

<select id="select1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<select id="myselect">    
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

JS:

$(function() {
    $("#select1").on('change', function() {
        $('#myselect').val("1");

        // re-initialize material-select
        $('#myselect').material_select();
    });
});

Ответ 2

Как было предложено @logikal, вам нужно повторно инициализировать

$("#myselect").material_select()

Ответ 3

$('#myselect').formSelect() ;

Новый метод - formSelect(), используйте его после обновления выбора.

Ответ 4

Вместо использования .val(), он очистит значение, как обычно, с помощью jQuery:

$('#my-select').find('option[value="my-value"]').prop('selected', true);
$("#my-select").material_select();

Ответ 5

В 2018 году (Materialize v1.0.0-rc.2) сначала вы должны установить свой параметр программно:

$('#SELECT-ID').find('option[value="SELECT-VALUE"]').prop('selected', true);

А затем повторно инициализируйте select вход с помощью:

$("#SELECT-ID").formSelect();

Надеюсь, поможет!

Ответ 6

Использование делегированного события устраняет проблему для меня.

HTML

 <div class="input-field col s10" id="pickerContainer">
 <select>
            <option value="" disabled selected>Choose your option</option>
            </select>
          </div>

JS

$('#pickerContainer').on('change', 'select', function(){
 console.log("got you");
});

Ответ 7

Для новой версии materialize 1.0.0 используйте .select() вместо .material_select()

Решение без повторной инициализации.

function msValue (selector, value) {
 selector.val(value).closest('.select-wrapper').find('li').removeClass("active").closest('.select-wrapper').find('.select-dropdown').val(value).find('span:contains(' + value + ')').parent().addClass('selected active');
}

Затем просто используйте

msValue($("#select_id"), "value_here")

Ответ 8

Это похоже на то, что ответил logikal, но я думаю, что он чище:

$(".your-component-class").change(function(){

   //your code..


   //re-initialize component
   $(this).material_select();    
});

Ответ 9

Этот ответ может быть поздно, но он может помочь кому-то еще.

По готовности добавьте строку ниже

$(document).ready(function () {
        $('select').formSelect();
    });

Каждый раз, когда вы меняете опцию в вашем Select, добавляйте строку ниже

$("#select1").change(function() {
    $('#myselect').val('1');
    $('select').formSelect();
});

Это то, что сработало для меня, надеюсь, это поможет.

Ответ 10

Я нашел правильное решение от здесь

Для нескольких в материализованных

<div class="input-field col s12">
<select multiple>
    <option value="" disabled selected>Choose your option</option>
    <option value="1" selected>Option 1</option>
    <option value="2">Option 2</option>
    <option value="3" selected>Option 3</option>
</select>
<label>Materialize Multiple Select</label>

И теперь вы просто немного изменили свой раздел Javascript, и это URL:

<script src="http://materializecss.com/bin/materialize.js" />

вместо

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script> 

или любое другое соединение materialize.min.js

И для множественного выбора:

$(document).ready(function () {
        $('select').material_select();
    });

Вот оно. Вы можете проверить демонстрацию этого решения: JSFiddle