Pull fixed data from . json to select in form

Asked

Viewed 393 times

2

I don’t know what’s wrong that it’s not pulling the json data, my goal is to pull the city/neighborhood data to display through another javascript code, but I can’t get the select to display the cities and neighborhoods that are in the json file.

Javascript code

<script type="text/javascript"> 


    $(document).ready(function () {

                        $.getJSON('cidade_bairro.json', function (data) { alert(JSON.stringify(data))

                            var items = [];
            var options = '<option value="">Escolha uma cidade</option>';   

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

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

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

                $("#cidades 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>';
                        });                         
                    }
                });
                            }).change();

              $("#bairros").html(options);

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

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

                                    $.each(data, function (key, val) {
                                        if(val.nome == str) {
                                            $.each(val.bairros, function (key_neighborhood, val_neighborhood){
                                                options_bairros += '<option value="' + val_neighborhood +'">' + val_neighborhood + '</option>';
                                            });
                                        }
                                    });

            }).change();        

        });

    });

</script>

HTML code

    <!-- Cidade -->
    <select id="cidades">
        <option value=""></option>
    </select>
            <!-- Bairros -->
    <select id="bairros">
                <option value=""></option>
    </select>
jquery json select form

1 answer

1


Man, I don’t quite understand what you’re trying to do, but follow the code to list the neighborhoods of a city.

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

<head>

<script type="text/javascript">

$(document).ready(function () {
var str = ""
                        $.getJSON('/cidade_bairro.json', function (data) { 


                            var items = [];
            var options = '<option value="">Escolha uma cidade</option>';   

            $.each(data[0].bairro, function (key, val) {
                $("#cidades").append($('<option>', {
                    value: val,
                    text: val
                }));
            });                 

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

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

                $("#cidades 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>';
                        });                         
                    }
                });
                            }).change();

              $("#bairros").html(options);

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

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

                                    $.each(data, function (key, val) {
                                        if(val.nome == str) {
                                            $.each(val.bairros, function (key_neighborhood, val_neighborhood){
                                                options_bairros += '<option value="' + val_neighborhood +'">' + val_neighborhood + '</option>';
                                            });
                                        }
                                    });

            }).change();        

        });

    });
</script>
</head>
<body>
    <select id="cidades">
        <option value=""></option>
    </select>
            <!-- Bairros -->
    <select id="bairros">
                <option value=""></option>
    </select>
</body>
</html>

Browser other questions tagged jquery json select form

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