почему каскадное раскрывающееся значение не появляется при попытке обновить строку

Question

У меня есть форма, которая содержит зависимый динамический выпадающий список, первое зависит от второго, а второе зависит от третьего. Когда я выбираю значение из выпадающего списка и затем отправляю форму, все работает нормально (запись вставлена), но когда я пытаюсь обновить конкретную запись, значение выпадающего меню, которое я уже выбрал, не отображается. я использовал ajax и javascript, чтобы заполнить зависимые выпадающие списки.

// источник кода javascript //

$(document).ready(function(){

    $('#rubrique').change(
        function() {
            $.getJSON('loadSrub', {
                idRubrique : $(this).val(),
                ajax : 'true'
            }, function(data) {
                var html="" ;
                var len = data.length;
                for ( var i = 0; i < len; i++) {
                    html += '<option value="' + data[i].idSRubrique+'">'
                            + data[i].designation + '</option>';
                }
                html += '</option>';

                $('#srubrique').html(html);
            });
        });

    $('#srubrique').change(
        function() {
            $.getJSON('loadSSrub', {
                idSRubrique : $(this).val(),
                ajax : 'true'
            }, function(data) {
                var html="" ;
                var len = data.length;
                for ( var i = 0; i < len; i++) {
                    html += '<option value="' + data[i].idSSRubrique+'">'
                            + data[i].designation + '</option>';
                }
                html += '</option>';

                $('#ssrubrique').html(html);
            });
        });
});

// источник кода контроллера //

@RequestMapping(value = "/nouveau" ,method = RequestMethod.GET)
public String ajouterArticle(Model model) {
    Article article = new Article();
    article.setCodeArt(genCodeArt.GenerateCodeArt("ART%02d", "idArticle"));
    List<Rubrique> listRubrique = rubriqueService.selectAll();
    List<Fournisseur> listFournisseur = fournisseurService.selectAll();
    List<Drapeau> listDrapeau = drapeauService.selectAll();
    List<Pays> listPays = paysService.selectAll();
    if (listRubrique == null) {
        listRubrique = new ArrayList<Rubrique>();
    }
    if(listFournisseur == null) {
        listFournisseur = new ArrayList<Fournisseur>();
    }
    if(listDrapeau == null) {
        listDrapeau = new ArrayList<Drapeau>();
    }
    if(listPays == null) {
        listPays = new ArrayList<Pays>();
    }
    model.addAttribute("article", article);
    model.addAttribute("listRub", listRubrique);
    model.addAttribute("listFrn", listFournisseur);
    model.addAttribute("listDrp", listDrapeau);
    model.addAttribute("listPays", listPays);
    return "article/ajouterArticle";
}

Источник кода jsp

<div class="form-wrapper">
    <c:url value="/article/enregistrer" var="urlEnregistrer"></c:url>
    <f:form modelAttribute="article" action="${urlEnregistrer}"method="post" class="form-horizontal">
            <f:hidden path="idArticle"/>
                <div class="form-group ">
                <label for="codeArt" class="col-sm-2 col-form-label" >Code </label>
                <div class="col-sm-4">  
                <f:input path="codeArt" class="form-control" id="codeArt" placeholder="Code Article" value="${codeArt}" readonly="true" />
            </div>
            </div>
        <div class="form-group">
                                <label for="rubrique" class="col-sm-2 col-form-label">Rubrique</label>
                                <div class="col-sm-3">
                                    <f:select path="rubrique.idRubrique" class="form-control" id="rubrique" >
                                        <f:option  value="" label="Selectionner une rubrique"/>
                                        <f:options  items="${listRub}" itemLabel="designation" itemValue="idRubrique"/>
                                    </f:select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="srubrique" class="col-sm-2 col-form-label">Sous rubrique</label>
                                <div class="col-sm-3">
                                    <f:select path="srubrique.idSRubrique" id="srubrique" class="form-control">
                                    </f:select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="ssrubrique" class="col-sm-2 col-form-label">Sous Sous rubrique</label>
                                <div class="col-sm-3">
                                    <f:select path="ssrubrique.idSSRubrique" id="ssrubrique" class="form-control">
                                    </f:select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="paysProvenance" class="col-sm-2 col-form-label">Pays de Provenance</label>
                                <div class="col-sm-3">
                                    <f:select path="paysProvenance" id="paysProvenance"  class="form-control">
                                     <f:option value=""  label="Selectionner un Pays "/>
                                    <f:options  items="${listPays}" itemLabel="nomPays" itemValue="nomPays"/>

                                    </f:select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="paysOrigine" class="col-sm-2 col-form-label">Pays d'Origine</label>
                                <div class="col-sm-3">
                                    <f:select  path="paysOrigine" id="paysOrigine"  class="form-control">
                                    <f:option value="" label="Selectionner un Pays "/>
                                    <f:options  items="${listPays}" itemLabel="nomPays" itemValue="nomPays"/>
                                    </f:select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="drapeau" class="col-sm-2 col-form-label">Drapeau</label>
                                <div class="col-sm-3">
                                    <f:select path="drapeau.idDrapeau"  class="form-control" id="drapeau">
                                        <f:options  items="${listDrp}" itemLabel="couleur" itemValue="idDrapeau"/>
                                    </f:select>
                                </div>
                            </div>

Эта фотография обобщает мою проблему