How to make comparison using JSON/jQuery and PHP data

Question

I am currently using a JQuery code and a JSON file to load cities in a select> according to the chosen state/province. The JQuery is below.

$(document).ready(function() {

    $.getJSON('../../../js/statesCities.json', function(data) {
        var items = [];
        var options = '<option value="">Selecione</option>';
        $.each(data, function(key, val) {
            options += '<option value="' + val.sigla + '">' + val.sigla + '</option>';
        });
        $("#estados").html(options);

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

            var options_cidades = '<option value="">Selecione</option>';
            var str = "";

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

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

        }).change();

    });

});});

The JSON code I am using: https://gist.github.com/letanure/3012978

And the HTML selects:

<div>
    <b>Estado:</b>
    <select id="estados" class="form-control" name="estadoCliente" required>
        <option value="">Selecione</option>
    </select>
</div>
<div>
    <b>Cidade:</b>
    <select id="cidades" class="form-control" name="cidadeCliente" required>
        <option value="">Selecione</option>
    </select>
</div>

In fact, this code works just fine. But when I want to fill a form using PHP data, the code doesn't help. (The registration page is the same as editing. On the edition page, PHP loads user's information). If all the states and cities were pre-loaded in the HTML (Have all options typed), in order to check which state and city are in the database, I would use an inline PHP's if, considering the variable $state as the state of any user who filled in this form.

<option <?php echo $state=='AB'?'selected': ''?>>AB</option>

But It can't be used because the function $.each won't accept the variables from PHP. So, my question is how can I do this verification to each option, having the state and city saved in a database? I will use this code to load the data of a user, so I can edit information more easily.

PS: I don't know how I could better describe this question on the title.

Answer 1

Because you're loading the data on the frontend you will need to store the backend values somewhere, then once the data has loaded, use the JS to compare and select the correct option.

In your html you could do (supposing you're not using a templating engine):

<div>
    <b>Estado:</b>
    <select id="estados" class="form-control" name="estadoCliente" initial-val="<?php $estado; ?>" required>
        <option value="">Selecione</option>
    </select>
</div>
<div>
    <b>Cidade:</b>
    <select id="cidades" class="form-control" name="cidadeCliente" initial-val="<?php $cidade; ?>" required>
        <option value="">Selecione</option>
    </select>
</div>

Above you should see the use of initial-val="...", you can call this whatever you want. You will use these values when the data loads...

So, your JS would now use those, like so:

$(document).ready(function() {

    $.getJSON('../../../js/statesCities.json', function(data) {
        var items = [];
        var options = '<option value="">Selecione</option>';
        $.each(data, function(key, val) {
            options += '<option value="' + val.sigla + '">' + val.sigla + '</option>';
        });

        // always cache your jquery dom lookups in a var if queries more than once.
        var $estados = $("#estados");
        var $cidades = $("#cidades");

        $estados.html(options);
        $estados.change(function() {

            var options_cidades = '<option value="">Selecione</option>';
            var str = "";

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

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

        }).change();

        // now set the value on the "estados" <select> and trigger the change event, so the above code runs to change "cidades"
        $estados.val($estados.attr("initial-val")).trigger( "change" );

    });

});});

That, I hope gets you a solution you can build upon.