Dependent Drop-Downs：根据页面加载中第一个选择的值更改第二个选择选项

Question

我使此代码根据第一个选择的内容动态更改第二个选择。它的工作原理，但它不适合页面加载。脚本所在的页面正在接收从前一页上的表单发布的值;该值是在页面加载的第一次选择时选择的，但是当发生这种情况时，第二次选择不会改变。 希望有人能够理解这个问题并帮助我。

的代码：

<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” - >这是对的ID第一选择

“＃CustomFields_20_1” - >这是第二个的ID选择

如您所见，在页面加载时＃CustomFields_21_1采用来自上一页的POST表单的值。现在，选择＃CustomFields_20_1的选项是基于＃CustomFields_21_1更改动态构建的。 我想要做的是在页面加载时根据采用＃CustomFields_21_1（从POST形式发布的值）的值动态更改＃CustomFields_20_1的选项，因此无需用户交互。

希望有人可以帮帮忙这个小白

这里的选择：

<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

您需要强制您连接到您的第一选择要执行的“变”功能。尽可能少地做出改变（你可能想缓存你的jQuery对象）。

将这个作为最后一行的$(document).ready内：

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

即：

<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>