Returning a Select option with Ajax

Question

Returning a Select option with Ajax

Navigation

#1 by (1 votes)

5

Hello everyone, well, everybody, I need your help humbly with the following problem:

I have a scrpt Ajax with the states and cities of Brazil, and a select option where it lists the state and the other its respective cities, until then everything, after I select a city and a state, I can write in the bank normally, my difficulty is at the time of editing that select it goes blank, not selected what is in the table, it returns empty listing of Ajax states and cities,

I do not know how to do this, but how to call this select to edit it scroll and compare the list in Ajax with what is 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

asked by anonymous 21.10.2016 / 16:27

1 answer

What is the difference between SCRIPT_FILENAME and REQUEST_FILENAME? Recover firebase data with multiple parameters

score 1 · Answer 1

I think 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}));
                    });
                }
            });
        });
    });
});