通過Ajax更新兩個下拉框

Question

我有兩個通過Ajax更新的下拉框，在手動使用時都可以正常工作。

用戶單擊第一個下拉列表並選擇一個項目，該項目將發起Ajax調用並更新第二個下拉框。當用戶點擊第二個下拉式Ajax響應更新表單時。

現在我的問題： 我希望能夠通過URL向用戶發送該表單並傳遞兩個變量，以便表單自動檢查變量並更新這兩個下拉列表。我可以在沒有任何問題的情況下更新第一個下拉列表，並觸發更改事件。但由於某些原因，第二個下拉框的值不會更新。

以下是代碼片段，我有：

jQuery('#jform_make').val('<?php echo $make; ?>'); 
jQuery('#jform_make').trigger('change', function() { 
    console.log("state changed"); 
    jQuery('#jform_service').val('<?php echo $service; ?>'); 
    jQuery('#jform_service').change(); 
}); 
//jQuery('#jform_make').change(function(){ 
jQuery('#jform_make').bind('change', function() { 
    console.log("state changed"); 
}); 

這還不登錄控制檯東西。

更新：

jQuery('#jform_make').val('<?php echo $make; ?>').change(); 
jQuery('#jform_make').change(function(event) { 
    console.log(jQuery(this).val()); 
}); 

感謝

Answer 1

演示：http://jsfiddle.net/dU7kz/1/

HTML：

<select id="dd1" class="dropdown"></select> 
<select id="dd2" class="dropdown"></select> 

JS：

$('#dd1').append('<option value="1">My option 1</option>'); 
$('#dd1').append('<option value="2">My option 2</option>'); 
$('#dd1').append('<option value="3">My option 3</option>'); 
$('#dd1').append('<option value="4">My option 4</option>'); 
$('#dd1').append('<option value="5">My option 5</option>'); 
$('#dd1').val('3'); 

$('#dd2').append('<option value="6">My option 6</option>'); 
$('#dd2').append('<option value="7">My option 7</option>'); 
$('#dd2').val('7'); 

$('.dropdown').change(function(event) { 
    alert($(this).val()); 
});