Dependant Drop-Downs: change second select options based on a value of the first select on page load

ive made this code to dynamically change the second select based on what is selected on the first one. It works but it doesnt work on page load. The page where the script resides is receiving a value posted from a form on the previous page; that value is selected on the first select on page load but when that happens the second select doesnt change. Hope somebody can understand the problem and help me.

The code:

<script type="text/javascript">
$(document).read开发者_运维问答y(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" --> this is the ID of the first select

"#CustomFields_20_1" --> this is the ID of the second select

As you can see, on page load #CustomFields_21_1 takes the value of the form POST that is coming from the previous page. Right now the options of the select #CustomFields_20_1 is built dynamically based on #CustomFields_21_1 change. What i want to do is to dynamically change the options of #CustomFields_20_1 ALSO on page load based on the value that takes #CustomFields_21_1 (the value posted form the form POST), so without user interaction.

hope somebody can help out this noob

here are the 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>

---

You need to force the the 'change' function you attached to your first select to be executed. Making as few changes as possible (you probably want to cache your jQuery objects).

Put this as the final line inside of your $(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>