Dynamic Select in Materialize CSS

Question

Dynamic Select in Materialize CSS

Navigation

#1 by (0 votes)

0

I have two selects , when I change the first one, it has a on change event that calls a ajax to load the data of the second select , is working, but when I include Materialize CSS , it stops working , I no longer know what to do because I can not find the solution.

<div class="input-field col s3">
    <select name="ID_GERENCIA" id="ID_GERENCIA" onchange="ShowSupervisoes(this.value)">
        <option value="TODAS" selected>TODAS</option>
        <?php foreach($TBL_Gerencia as $Gerencia) : ?>
            <option  value="<?=$Gerencia['ID_GERENCIA']?>"><?=$Gerencia['NM_GERENCIA']?></option>
        <?php endforeach ?>
    </select>
</div>
<div class="input-field col s2">
    <select name="ID_SUPERVISAO" id="ID_SUPERVISAO" class="ID_SUPERVISAO">
        <option value="TODAS" selected>TODAS</option>
    </select>
</div>

function ShowSupervisoes(str) {
    if (str == "") {
        document.getElementById("ID_SUPERVISAO").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("ID_SUPERVISAO").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","AJAX/supervisoes.php?q="+str,true);
        xmlhttp.send();
    }
}

And normal initialization of select :

$(document).ready(function() {
    // CAIXAS SELECT
    $('select').material_select();
    $('.modal').modal();
});

php javascript jquery material-design materialize

asked by anonymous 06.04.2018 / 14:56

1 answer

Object is coming null Help call Rest and populate another table via Click

score 0 · Answer 1

After adding dynamic options or changing some property, you must destroy and re-initialize select , like this:

// Destroi o select
$('select').material_select('destroy');

// Insere as opções via Ajax

// Inicializa o select com a nova propriedade
$('select').material_select();