Olá  pessoal!!!
Vamos para mais uma dica, essa vai para você que já teve dificuldade em receber o valor do banco de dados e inserir em um select, mas siga a dica até o final que vou lhe mostrar uma maneira bem fácil de resolver esse problema.

Bem, vamos supor que temos um select  com 4 opções como no código abaixo:

<select id='linguagem'>
    <option value=''>Selecione...</option>
    <option value='html'> HTML5 </option>
    <option value='js'> JavaScript </option>
    <option value='php'> PHP </option>
    <option value='sql'> MySQL </option>
</select>

A opção que está armazenada no banco é dinâmica , cada usuário do sistema tem sua linguagem preferida armazenada no banco de dados, enfim, no nosso exemplo o usuário tem como linguagem preferida o MySQL, logo  o meu retorno do banco de dados é “sql”, se eu tentar verificar via php qual opção devo deixar selecionada ficaria algo assim:

<select id='linguagem'>
    <option value=''>Selecione...</option>
    <option value='html' <?php if($valorBanco == "html"){echo "selected";} ?> > HTML5 </option>
    <option value='js'  <?php if($valorBanco == "js"){echo "selected";} ?> > JavaScript </option>
    <option value='php' <?php if($valorBanco == "php"){echo "selected";} ?> > PHP </option>
    <option value='sql' <?php if($valorBanco == "sql"){echo "selected";} ?> > MySQL </option>
</select>

Claro que você poderia tentar fazer uma estrutura case (switch), você ainda teria o problema de ter uma condição para cada opção ou seja, para um select de 4 opções é tranquilo, mas pensa se fosse um select de 60 opções ou mais!

Daí entra a maravilha do JavaScript, então vamo lá!
Vamo criar uma função que vai resolver esse problema, você deve coloca-la no inicio do código onde está o select

            function selecionar(op, idSelect)
            {
                var combo = document.getElementById(idSelect);

                for (var i = 0; i < combo.options.length; i++)
                {
                    if (combo.options[i].value == op)
                    {
                        combo.options[i].selected = "true";
                        break;
                    }
                }
            }

Essa função irá receber a opção que você vai receber do banco de dados e o id do nosso select.

Aí amigo, é só correr para o abraço!

Agora é só chamar nossa função logo após o select como mostro no exemplo abaixo

<select id='linguagem'>
    <option value=''>Selecione...</option>
    <option value='html'> HTML5 </option>
    <option value='js'> JavaScript </option>
    <option value='php'> PHP </option>
    <option value='sql'> MySQL </option>
</select>
<script>
   selecionar('<?php echo $valorBanco ?>','linguagem');
</script>

E assim seu select vai ficar selecionado, de acordo com o valor que estiver salvo em seu banco de dados e caso você tenha a necessidade de inserir mais uma ou dezenas de opções no seu select, não vai ter problema, pois a função já está pronta para ler as opções do select inteiro.
Espero ter ajudado, e que você possa compartilhar e mostrar para outras pessoas que possam ter o mesmo problema.
Ah, e se você quiser baixar o código todo comentado e bem explicadinho, basta clicar aqui.

 

autor: Ricardo de Oliveira – ricardo.reksystem@gmail.com

2 Comments

Deixe uma resposta