0

Eu tenho um select de cidades que é abastecido de forma dinâmica com a consulta retornada no bancos de dados, porém quando é jogado os valores no option o valor default vazio some impedindo de selecionar uma linha vazia. Vejam:

Select vazio: inserir a descrição da imagem aqui

Select abastecido:

inserir a descrição da imagem aqui

Segue códigos quem abastecem os options:

function func(){
    if(ajax.readyState == 4 && ajax.status == 200){
        eval(ajax.responseText);  

        if(dados.erro){
            alert(convertHtml(dados.erro));                    
        }else{
        var vazio = "";
        var cidades =  dados.split(",");
        var html = "";

    for(var i = 0; i < cidades.length; i++)
    {
        html =  '<option>'+cidades[i]+'</option>';
        document.getElementById('cidade').innerHTML += html;
    }
       }
    }     
}

<label for="cidade">Cidade: <br>
                        <select name="cidade" id="cidade" value="<?=$MunNome?>" class="campos_menu" style="width:110px;">
                         <option value=""></option>
                        </select>
                        </label>
2
  • Qual é o código que chama esta função? Parece ter algum outro código que manipula o select 24/05/2018 às 12:14
  • @GabrielHeming ele é chamando de um evento OnChange do select de UF para poder consultar no banco e retornar as cidades. 24/05/2018 às 12:18

4 Respostas 4

1

Basta criar um option com texto vazio e adicionar ao final do for no select:

for(var i = 0; i < cidades.length; i++) {
   .....
 }

var select = document.getElementById('cidade');
var opt = new Option('', '');
select.insertBefore(opt,  select.options[0]); 

Só para esclarecer, o option poderia ser adicionado simplesmente assim:

select.add(opt);

Mas isso adicionaria no final, como o último. Como na pergunta fala de um option vazio, que seria o primeiro, com o mesmo objetivo de um "-- selecione --", usei o insertBerfore, que vai inserir antes de um option existente. Como o segundo parâmetro é select.options[0], que retorna o primeiro elemento (índice 0), vai inserir o novo option antes dele, que será então a primeira opção do select.

1

Bom, eu fiz um ajuste para que eu pudesse testar aqui e da forma abaixo está funcionando perfeitamente, espero que o código abaixo possa ajudar:

 <html>
    <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

function func() {
        var cidades = ["Jaraguá do Sul", "Guaramirim", "Joinville" "Florianópolis"];
        var html = "";

    for(var i = 0; i < cidades.length; i++)
    {
        html =  '<option>'+cidades[i]+'</option>';
        document.getElementById('cidade').innerHTML += html;
    }
}

$('document').ready(function(){
func();
});
</script>
</head>
<body>
<label for="cidade">Cidade: <br>
        <select name="cidade" id="cidade" style="width:110px;">
                         <option value=""></option>
                        </select>                
                        </label>

<body>
</html>

Print de como ficou

Confira se a sua classe CSS não está escondendo o overflow do select.

1

Crie primeiro a variável html com o <option> vazio depois vá concatenando no for. Apenas após o for, faça o innerHTML com toda a string já formada (recomenda-se inserir elementos HTML de uma só vez do que ir inserindo dentro do laço):

var html = '<option value=""></option>';
for(var i = 0; i < cidades.length; i++)
{
    html += '<option>'+cidades[i]+'</option>';
}
document.getElementById('cidade').innerHTML = html;
0

Igor, se a sua função que monta a lista de options está no javascript, então muda a função para a seguinte forma:

function func(){
    if(ajax.readyState == 4 && ajax.status == 200){
        eval(ajax.responseText);  

        if(dados.erro){
            alert(convertHtml(dados.erro));                    
        }else{
        var vazio = "";
        var cidades =  dados.split(",");
        var html = "";

       // Reiniciando a lista como vazia 
       document.getElementById('cidade').innerHTML = '<option></option>';

       for(var i = 0; i < cidades.length; i++)
       {
           html =  '<option>'+cidades[i]+'</option>';
           document.getElementById('cidade').innerHTML += html;
       }
    } 
}

Você irá inserir o valor e para não correr o risco de a lista crescer a cada reatualização de valores. Mas trago uma sugestão para limpar um pouco o seu código...

function func(){
    if(ajax.readyState == 4 && ajax.status == 200){
        eval(ajax.responseText);  

        if(dados.erro){
            alert(convertHtml(dados.erro));                    
        }else{
        var cidades =  dados.split(",");

       document.getElementById('cidade').innerHTML = getOption('');

       for(var i = 0; i < cidades.length; i++)
       {
           document.getElementById('cidade').innerHTML += getOption(cidades[i]);
       }
    }     
}

function getOption(value) {
    retunr '<option>'+ value + '</option>';
}

Espero tê-lo ajudado. Qualquer outra informação vai falando que eu edito a resposta. Sucesso!

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 .