Question

我目前正在使用JQuery代码和JSON文件来加载select＆gt;中的城市根据所选州/省。 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" );

    });

});});

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

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

1 个答案: