如何使用 JSON/jQuery 和 PHP 数据进行比较

Question

我目前正在根据所选州/省使用 JQuery 代码和 JSON 文件在选择中加载城市。 JQuery 在下面。

$(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();

    });

});});

我使用的 JSON 代码：https://gist.github.com/letanure/3012978

HTML 选择：

<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>

事实上，这段代码运行良好。但是当我想使用 PHP 数据填写表格时，代码没有帮助。 （注册页面和编辑一样，在编辑页面，PHP加载用户信息）。如果所有州和城市都预先加载在 HTML 中（输入所有选项），为了检查数据库中的州和城市，我会使用内联 PHP 的 if ，将变量 $state 视为填写此表单的任何用户的状态。

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

但它不能被使用，因为函数 $.each 不会接受来自 PHP 的变量。所以，我的问题是如何对每个选项进行验证，将州和城市保存在数据库中？我将使用这段代码来加载用户的数据，这样我可以更轻松地编辑信息。

PS：我不知道如何才能更好地在标题上描述这个问题。

Answer 1

因为您是在前端加载数据，所以您需要将后端值存储在某处，然后在加载数据后，使用 JS 进行比较并选择正确的选项。

在您的 html 中，您可以这样做（假设您没有使用模板引擎）：

<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>

您应该在上面看到initial-val="..." 的用法，您可以随意调用它。您将在数据加载时使用这些值...

所以，你的 JS 现在会使用这些，就像这样：

$(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" );

    });

});});

那，我希望能为您提供一个可以构建的解决方案。