Assign selected item in a <select>

Asked

Viewed 2,867 times

3

I have the following code:

$("#cep").on('mouseout', function() {

    var url = "http://cep.republicavirtual.com.br/web_cep.php";
    var cep = $(this).val();

    $.ajax({
        type: "GET",
        dataType: 'json',
        data: {'cep': cep, 'formato': 'json'},
        async: false,
        url: url,
        success: function(response) {

            if (response.resultado === '1') {

                $("#bairro").val(response.bairro);
                $("#endereco").val(response.logradouro);

                var uf = response.uf;
                $("select#estado option").each(function() {
                    this.selected = (this.text === uf);
                });

                $("#estado").trigger("change");

                var cidade = response.cidade;

                $("select#cidade option").each(function() {
                    this.selected = (this.text === cidade);
                    console.log(this.selected);
                });

            }

        }
    });

});

In this part of the code should "set" the city in the combo that was returned via ajax. Note that this part comes after the $("#estado").trigger("change");

var cidade = response.cidade;

$("select#cidade option").each(function() {
   this.selected = (this.text === cidade);
});

Does not work, cities are filled, the city comes normally but is not "set" as default in combo box.

How to solve this?

javascript jquery html

  • You can post here the console.log(response)? it seems to me he’s returning xml.

  • Your options have no value?

  • yes, it has value but the return comes as text and so I have to use so

2 answers

2


Maybe it works by putting the code to run inside a callback (Event Handler):

        $("select#cidade").one("atualizado", function(){
            var cidade = response.cidade;
            $("select#cidade option").each(function() {
                this.selected = (this.text === cidade);
                console.log(this.selected);
            });
        });

        $("#estado").trigger("change");

I’m guessing there is one callback for the event change of #state, to modify the city list. Therefore, the code that marks the selected option must be executed afterward update of the city list.

In the above suggestion, we use the function one jQuery so that a new callback be executed once, and then be disposed of.

You will also need to fire the event "updated". Do this in your code. Put the command down immediately after updating the options of select containing the list of cities in the state:

$("select#cidade").trigger("atualizado");

  • Even in this way I did not succeed, I am looking for and find myself put here for us

  • Probably the other callback has an ajax call to load the cities... the code that checks the Selected should be executed after the callback of that ajax. If you want more help, you need to edit your question and put more code there.

  • Ready - updated answer. See if it helps.

  • Thank you, the above code worked right. Then the tip is for those who need.

  • Please accept my reply by clicking on the "check" next to it. I recommend you read: http://answall.com/tour

2

Try to use .val()
Remove this code snippet

$("select#cidade option").each(function() {
    this.selected = (this.text === cidade);
    console.log(this.selected);
});

And insert this

$("select#cidade").val(cidade);

Browser other questions tagged javascript jquery html

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