Através de um .val(), escolher opção em select

[Maykel-ctba 233]

Galera,

 

Tenho o seguinte script que faz uma consulta de CEP nos Correios. Funciona legal e todos os dados informados estão sendo trazidos normalmente. Através do resultado, ele preenche os campos do formulário como endereço, bairro, cidade. Porém, o Estado não está funcionando.

 

Não sei se com .val() funciona para selects. Para todos os outros campos, funciona normalmente.

// * Consulta CEP
$('#cep').blur(function()
{
    $.ajax(
    {
        url : 		'consultaCEP.php',
        type : 		'POST', 
        data: 		'cep=' + $('#cep').val(),
        dataType: 	'json'
        , beforeSend: function()
        {
            $("#overlay-promo").fadeIn();
        }
        , success: function(data)
        {
            setTimeout($("#overlay-promo").fadeOut(), 1500);
            if(data.sucesso == 1)
            {
                $('#endereco').val(data.rua);
                $('#bairro').val(data.bairro);
                $('#cidade').val(data.cidade);
                $('#estado').val(data.estado);
                $('#numero').focus();
            }
        }
        , error: function(data)
        {
            setTimeout($("#overlay-promo").fadeOut(), 1500);
        }
    });   
});

<select id="estado" name="estado">
    <option value="">Selecione</option>
    <option value="AC">Acre</option>
    <option value="AL">Alagoas</option>
    <option value="AP">Amapá</option>
    <option value="AM">Amazonas</option>
    <option value="BA">Bahia</option>
    <option value="CE">Ceará</option>
    <option value="DF">Distrito Federal</option>
    <option value="ES">Espírito Santo</option>
    <option value="GO">Goiás</option>
    <option value="MA">Maranhão</option>
    <option value="MT">Mato Grosso</option>
    <option value="MS">Mato Grosso do Sul</option>
    <option value="MG">Minas Gerais</option>
    <option value="PA">Pará</option>
    <option value="PB">Paraíba</option>
    <option value="PR">Paraná</option>
    <option value="PE">Pernambuco</option>
    <option value="PI">Piauí</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="RN">Rio Grande do Norte</option>
    <option value="RS">Rio Grande do Sul</option>
    <option value="RO">Rondônia</option>
    <option value="RR">Roraima</option>
    <option value="SC">Santa Catarina</option>
    <option value="SP">São Paulo</option>
    <option value="SE">Sergipe</option>
    <option value="TO">Tocantins</option>
</select>

---

 

Percebi que o campo não é alterado quando uso um "alterador de layout", do Foundation. :/

E não consigo encontrar uma solução...

[Snowden 94]

funciona sim com .val() se o valor do data.estado for no mesmo formato do value do select

$('#estado').val('SP');

Agora se o valor de data.estado for no formato texto, seria assim:

     $('#estado option').each(function(){
	if( $( this ).text() == 'São Paulo' ){
	     $( this ).prop('selected', true);
	}
     });

[Maykel-ctba 233]

Pior que é o mesmo valor, eu fiz a conferência... tá tudo vindo como UF e maiúsculo. Tem alguma incompatibilidade com o custom forms do Foundation, pq eu desativo o javascript do Foundation e funciona normal :/

[William Bruno 1501]

Um pouquinho de pesquisa:

 

http://stackoverflow.com/questions/12811126/changing-value-of-select-box-in-zurbs-foundation-via-javascript

 

You have to trigger "change" event after changing selected index.

$('#selectboxID').trigger('change');

[Maykel-ctba 233]

@William, obrigado pela ajuda!

Eu até cheguei a ver esse link fazendo uma busca no Google, porém, não funcionou.

 

Vendo no firebug, ele até deu um Syntax error que não faço a minima ideia de onde esteja, ele indica uma linha, porém aparentemente ela está OK.

$('#cep').blur(function()
{
    $.ajax(
    {
        url : 		'consultaCEP.php',
        type : 		'POST', 
        data: 		'cep=' + $('#cep').val(),
        dataType: 	'json'
        , beforeSend: function()
        {
            $("#overlay-promo").fadeIn();
        }
        , success: function(data)
        {
            if(data.sucesso == 1)
            {
                $('#endereco').val(data.rua);
                $('#bairro').val(data.bairro);
                $('#cidade').val(data.cidade);
                $('#estado').val(data.estado);
                $('#estado').trigger('change'); // * Adicionei o trigger aqui, logo após a mudança do .val()
                $('#numero').focus();
            }
            setTimeout($("#overlay-promo").fadeOut(), 1500); // * Aqui é a linha indicada
        }
        , error: function(data)
        {
            setTimeout($("#overlay-promo").fadeOut(), 1500);
        }
    });   
});

[William Bruno 1501]

troca isso:

setTimeout($("#overlay-promo").fadeOut(), 1500);

por

setTimeout($("#overlay-promo").fadeOut, 1500);

vc não pode colocar uma function dentro de um setTimeout ou um setInterval, vc tem q colocar "o nome dela".

 

Sobre erros, ajuda se vc manter um estilo de escrita coerente. Use o jshint

http://www.jshint.com