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>