Returning a Select option with Ajax

Asked

Viewed 2,043 times

5

Hello folks all right everyone, I need your help I’m with the following problem:

I have an Ajax scrpt with the states and cities of Brazil, and a select option where lists the state and the other their respective cities, so far so good, after I select a city and a state, I can record in the bank normally, my difficulty is when editing this select it is blank, is not selected what is in the table, it returns empty listing from Ajax the states and cities,

I don’t know how to do it, but there is a way to call this select to edit it to go through and compare the list in Ajax with what appears in the table column and already be selected ?

HTML:

<select id="estados">
  <option value=""></option>
</select>

<select id="cidades" >
<option value=""></option>
</select>

Javascript

<script type="text/javascript"> 

    $(document).ready(function () {

        $.getJSON('estados_cidades.json', function (data) {

            var items = [];
            var options = '<option value="">escolha um estado</option>';    

            $.each(data, function (key, val) {
                options += '<option value="' + val.nome + '">' + val.nome + '</option>';
            });                 
            $("#estados").html(options);                

            $("#estados").change(function () {              

                var options_cidades = '';
                var str = "";                   

                $("#estados option:selected").each(function () {
                    str += $(this).text();
                });

                $.each(data, function (key, val) {
                    if(val.nome == str) {                           
                        $.each(val.cidades, function (key_city, val_city) {
                            options_cidades += '<option value="' + val_city + '">' + val_city + '</option>';
                        });                         
                    }
                });

                $("#cidades").html(options_cidades);

            }).change();        

        });

    });

</script>
javascript jquery ajax
  • 1

    You can give an example of this JSON on data? Come as array?

  • gives a look at this very similar question: http://answall.com/questions/160102/como-selectr-um-option-com-compares%C3%A7%C3%a3o-de-values/160105#160105

  • Last week I worked on a form with the 3 combos, city state and parents, on the edition page, as I already know the 3 selected items, assemble the combos already containing all your appropriate options and give a Selected in the selected items...

  • I still can not solve, I am beginner in programming, if someone can help me I really appreciate.

1 answer

1

I believe you’re trying to do something like this.

$(document).ready(function () {
    $.getJSON('estados_cidades.json', function (data) {
        $("#estados").append('<option value="">Escolha um estado</option>');

        $.each(data, function (key, val) {
            $("#estados").append('<option></option>', {value: val.nome, text:val.nome});
        });
    });

    $("#estados").change(function () {
        $("#cidades").html('');
        $.getJSON('estados_cidades.json', function (data) {
            $.each(data, function (key, val) {
                if(val.nome == $(this).value()) {
                    $.each(val.cidades, function (key_city, val_city) {
                        $("#cidades").append($('<option></option>', {value: val_city, text: val_city}));
                    });
                }
            });
        });
    });
});

Browser other questions tagged javascript jquery ajax

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