Javascript 根据选择显示不同的内容（级联下拉列表）

我想根据最后选择的项目显示不同的内容（级联下拉列表）

第一步：

我正在使用jquery脚本在自定义模板页面中使用JSON显示级联dropdownlist

3列，如：国家/州/城市

我的html代码：

<div class="container">
<br />
<select name="filiere" id="filiere" class="form-control input-md">
    <option value="">Votre filière métier</option>
</select>
<br />
<select name="metier" id="metier" class="form-control input-md">
    <option value="">Votre métier</option>
</select>
<br />
<select name="poste" id="poste" class="form-control input-md">
    <option value="">Votre poste</option>
</select>

弗特·菲利埃·梅蒂埃


沃特·梅蒂埃


沃特邮政

我的脚本如下：

$(document).ready(function() {

load_json_data('filiere');

function load_json_data(id, parent_id) {
    var html_code = '';
    $.getJSON('http://localhost/thomgroupe/wp-content/themes/thomgroupe/library/car_list.json', function(data) {

        html_code += '<option value="">Sélectionnez ' + id + '</option>';
        $.each(data, function(key, value) {
            if (id == 'filiere') {
                if (value.parent_id == '0') {
                    html_code += '<option value="' + value.id + '">' + value.name + '</option>';
                }
            } else {
                if (value.parent_id == parent_id) {
                    html_code += '<option value="' + value.id + '">' + value.name + '</option>';
                }
            }
        });
        $('#' + id).html(html_code);
    });

}

$(document).on('change', '#filiere', function() {
    var filiere_id = $(this).val();
    if (filiere_id != '') {
        load_json_data('metier', filiere_id);
    } else {
        $('#metier').html('<option value="">Selectionnez votre métier</option>');
    }
        $('#poste').html('<option value="">Selectionnez votre poste</option>');
});
$(document).on('change', '#metier', function() {
    var metier_id = $(this).val();
    if (metier_id != '') {
        load_json_data('poste', metier_id);
    } else {
        $('#poste').html('<option value="">Selectionnez votre poste</option>');
    }
});

$（文档）.ready（函数（）{
加载json数据（'filiere'）；
函数加载\u json\u数据（id，父\u id）{
var html_代码=“”；
$.getJSON（'http://localhost/thomgroupe/wp-content/themes/thomgroupe/library/car_list.json，函数（数据）{
html_代码+='Séselectionnez'+id+''；
$。每个（数据、函数（键、值）{
如果（id='filiere'）{
如果（value.parent_id=='0'）{
html_code+=''+value.name+''；
}
}否则{
if（value.parent\u id==parent\u id）{
html_code+=''+value.name+''；
}
}
});
$（'#'+id）.html（html#u代码）；
});
}
$（文档）.on（'change'，'filier'，function（）{
var filiere_id=$（this.val（）；
如果（filiere_id！=''）{
加载json数据（'metier'，文件id）；
}否则{
$（'#metier'）.html（'Selectionnez votre métier'）；
}
$（'#poste'）.html（'Selectionnez votre poste'）；
});
$（文档）.on（'change'，'#metier'，function（）{
var metier_id=$（this.val（）；
如果（metier_id！=''）{
加载json数据（“poste”，metier\u id）；
}否则{
$（'#poste'）.html（'Selectionnez votre poste'）；
}
});

**第二步：**

我想在一个新的分区中显示不同的内容，具体取决于所选的城市

我可以将数据存储在另一个JSON文件中吗？我要显示100多个不同的结果

我应该使用带有自定义查询的搜索表单吗

或者我可以通过另一种方式生成此内容

最简单的解决方案是什么

谢谢你的建议