J'ai un script qui permet de faire apparaitre la liste deroulante suivante lorsque l'on selectionne une option et ne fait apparaitre dans cette liste que les option liée à la sélection faite dans la liste précédente.

Celà fonctionne bien, mis à part lorsque une valeur est préselectionnée (par exemple si une valeur est marquée selected de base ou lorsque je soumet mon formulaire et qu'il echoue j'ai un script qui maintient selectionné la valeure choisie lors de la soumission du formulaire.

Dans ces cas la plus rien ne reste affiché. Je suppose que c'est du au fait que j'uttilise la method change et que donc lorsque qqch est sélectionné de base rien ne change et donc le script ne s'applique pas. Comment puis-je modifier mon Jquery pour que ca s'applique en fonction de la valeur selectionnée et pars forcément on change. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<div class="selection">
    <select name="system" id="selectsystem">
        <option value="">--Select a System--</option>
        <?php
        foreach($allsystems as $elementsystem)
        {
            echo'
            <option value="'.$elementsystem["systemName"].'"';
            if(isset($_POST["create"]) and $_POST["system"]==$elementsystem["systemName"]){echo 'selected';}
            echo'>'.$elementsystem["systemName"].'</option>';
        }
        ?>
    </select>
</div>
<div class="parent1">
    <select name="parent1" id="parent1">
        <option value="">--Select a Location--</option>';
        <?php       
            foreach($alllocations as $elementlocations)
            {
                if($elementlocations["parent1"]=="no" and $elementlocations["parent2"]=="no")
                {
                    echo'
                    <option class="'.$elementlocations["system"].'" value="'.$elementlocations["generalID"].'"';
                    if(isset($_POST["create"]) and $_POST["parent1"]==$elementlocations["generalID"]){echo 'selected';}
                    echo'>'.$elementlocations["name"].'</option>';
                }
            }
        ?>
    </select>
</div>

<div class="parent2">
    <select name="parent2" id="parent2">
        <option value="">--Select a Location--</option>
        <?php       
            foreach($alllocations as $elementlocations)
            {
                if($elementlocations["parent1"]!="no" and $elementlocations["parent2"]=="no")
                {
                    echo'
                    <option class="'.$elementlocations["parent1"].'" value="'.$elementlocations["generalID"].'"';
                    if(isset($_POST["create"]) and $_POST["parent2"]==$elementlocations["generalID"]){echo 'selected';}
                    echo'>'.$elementlocations["name"].'</option>';
                }
            }
        ?>
    </select>
</div>
<div class="parent3">
    <select name="parent3" id="parent3">
        <option value="">--Select a Location--</option>
        <?php       
            foreach($alllocations as $elementlocations)
            {
                if($elementlocations["parent1"]!="no" and $elementlocations["parent2"]!="no")
                {
                    echo'
                    <option class="'.$elementlocations["parent3"].'" value="'.$elementlocations["generalID"].'"';
                    if(isset($_POST["create"]) and $_POST["parent3"]==$elementlocations["generalID"]){echo 'selected';}
                    echo'>'.$elementlocations["name"].'</option>';
                }
            }
        ?>
    </select>
</div>


<script>
$(document).ready(function(){
    $('#selectsystem').on('change', function(){
        if( $('#selectsystem').val() != '') {
            $('#sublocations').show();
            $('#parent1').show();
          }
          else
          {
            $('#sublocations').hide();
            $('#parent1').hide();
          }
    });
    $('#parent1').on('change', function(){
        if( $('#parent1').val() != '') {
            $('#parent2').show();
          }
          else
          {
            $('#parent2').hide();
            $('#parent3').hide();
          }
    });
    $('#parent2').on('change', function(){
        if( $('#parent2').val() != '') {
            $('#parent3').show();
          }
          else
          {
            $('#parent3').hide();
          }
    });
    $('#selectsystem').on('change', function(){
        $('#parent1 option').not('.'+ this.value).hide();
        $('.emptyselection').show();
        $('.'+ this.value).show();
    });
    $('#parent1').on('change', function(){
        $('#parent2 option').not('.'+ this.value).hide();
        $('.emptyselection').show();
        $('.'+ this.value).show();
    });
    $('#parent2').on('change', function(){
        $('#parent3 option').not('.'+ this.value).hide();
        $('.emptyselection').show();
        $('.'+ this.value).show();
    });
});
</script>

mon css

#sublocations, #parent1, #parent2, #parent3{
    display:none;
}

Salut, 

Au lieu d'utiliser des fonctions anonymes, nomme-les, pour pouvoir les appeler au chargement ou lors de la survenue d'autres événement :

$selectSystem = $('#selectsystem');

function parent1filter(e) {
  $('#parent1 option ').not('.' + $selectSystem.val()).hide();
  // etc...
}

$selectSystem.on('change', parent1filter);

parent1filter(); // appel au chargement de la page