Dérivations dépendantes: modifiez les secondes options de sélection en fonction de la valeur de la première sélection au chargement de la page

Question

ive a fait ce code pour modifier dynamiquement la deuxième sélection en fonction de ce qui est sélectionné sur le premier. Cela fonctionne mais cela ne fonctionne pas sur le chargement de la page. La page où réside le script reçoit une valeur postée depuis un formulaire sur la page précédente; cette valeur est sélectionnée lors de la première sélection lors du chargement de la page mais lorsque cela se produit, la seconde sélection ne change pas. J'espère que quelqu'un pourra comprendre le problème et m'aider.

Le code:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#CustomFields_21_1').val('<?php echo $_POST['secondform']; ?>') 
$('#CustomFields_21_1').change(function() { 
var options = ''; 
if($(this).val() == 'a') { 
options = '<option value="">-- Seleccione una versión --</option><option value="1">1</option><option value="2">2</option><option value="3">3</option>'; 
} 
else if ($(this).val() == 'b'){ 
options = '<option value="4">4</option><option value="5">5</option>'; 
} 
else if ($(this).val() == 'c'){ 
options = '<option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option>'; 
} 
$('#CustomFields_20_1').html(options); 
}); 
}); 
</script> 

"# CustomFields_21_1" -> c'est l'ID de la première sélection

"# CustomFields_20_1" -> c'est l'ID de la deuxième sélectionnez

Comme vous pouvez le voir, lors du chargement de la page # CustomFields_21_1 prend la valeur du formulaire POST provenant de la page précédente. À l'heure actuelle, les options du select # CustomFields_20_1 sont générées dynamiquement en fonction de la modification # CustomFields_21_1. Ce que je veux faire est de changer dynamiquement les options de # CustomFields_20_1 AUSSI au chargement de la page en fonction de la valeur qui prend # CustomFields_21_1 (la valeur affichée sous la forme POST), donc sans interaction de l'utilisateur.

espoir quelqu'un peut aider ce Noob

voici les Selects:

<select name="CustomFields[21]" id="CustomFields_21_1"><option selected="selected">--  Seleccione un modelo --</option><option value="a">a</option><option value="b">b</option>  <option value="c">c</option></select> 

<select name="CustomFields[20]" id="CustomFields_20_1"><option selected="selected">--  Selecciona una versión --</option></select> 

Answer 1

Vous devez forcer la fonction « changement » vous attaché à votre première sélection à exécuter. Faire le moins de changements possible (vous voulez probablement mettre en cache vos objets jQuery).

Mettre cela comme la dernière ligne à l'intérieur de votre $(document).ready:

$('#CustomFields_21_1').trigger('change'); 

i.e. .:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#CustomFields_21_1').val('<?php echo $_POST['secondform']; ?>') 
$('#CustomFields_21_1').change(function() { 
var options = ''; 
if($(this).val() == 'a') { 
options = '<option value="">-- Seleccione una versión --</option><option value="1">1</option><option value="2">2</option><option value="3">3</option>'; 
} 
else if ($(this).val() == 'b'){ 
options = '<option value="4">4</option><option value="5">5</option>'; 
} 
else if ($(this).val() == 'c'){ 
options = '<option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option>'; 
} 
$('#CustomFields_20_1').html(options); 
}); 
$('#CustomFields_21_1').trigger('change'); 
}); 
</script>