-1

Tenho dois selects, quando altero o primeiro, tem um evento on change que chama um ajax pra carregar os dados do segundo select, está funcionando, mas ao incluir o Materialize CSS, para de funcionar, já não sei mais o que fazer pois não encontro a solução.

<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();
    }
}

E a inicialização normal do select:

$(document).ready(function() {
    // CAIXAS SELECT
    $('select').material_select();
    $('.modal').modal();
});
2
  • Barbara se possível Edite sua pergunta com o Código. O que deixa de funcionar é o Select em si ou o evento JS que carrega os dados?
    – hugocsl
    6/04/2018 às 13:42
  • Inseri o código, o primeiro select chama uma função ajax, pra preencher o segundo select, sei que o problema ta no materialized pq quando removo e deixo sem formatação nenhuma, funciona normalmente
    – Barbara
    6/04/2018 às 16:17

1 Resposta 1

0

Após adicionar opções dinâmicas ou trocar alguma propriedade, é preciso destruir e inicializar novamente o select, dessa forma:

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

// Insere as opções via Ajax

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .