Select dynamically in Materialize CSS

Asked

Viewed 768 times

1

I have two selects, when I change the first one, there’s an event on change who calls a ajax to load the data of the second select, is working, but by including the Materialize CSS, I don’t know what else to do because I can’t 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 the normal initialization of select: 

$(document).ready(function() {
    // CAIXAS SELECT
    $('select').material_select();
    $('.modal').modal();
});
php javascript jquery materialize material-design

  • Barbara if possible Edit your question with the Code. What stops working is Select itself or the JS event that loads the data?

  • I inserted the code, the first select calls an ajax function, to fill the second select, I know the problem ta no materialized pq when I remove and leave no formatting, works normally

1 answer

0

After adding dynamic options or changing some property, you need to destroy and re-initialize the select, thus:

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

// Insere as opções via Ajax

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

Browser other questions tagged php javascript jquery materialize material-design

You are not signed in. Login or sign up in order to post.