如何實現這個jQuery代碼

Question

我剛剛得到了我遇到的問題的解決方案，但我不確定如何實際實現它。

$(function(){ 
    $.get('file1.php', function(data){ 
     $('#dropdown1').html(data); 
    }); 

    // on change of dropdown1 populate dropdown2 with the respective data 
    $('#dropdown1').change(function(){ 
     $.get('file2.php',{ make: $(this).val() }, function(data){ 
      $(this).html(data); 
     }); 
    }); 
}); 

這裏是我問 Ajax form, 2 drop downs with external source
的問題，我仍然不確定如何格式化文件1和file2.php以及如何落實到我的形式。 我真的很感激你的建議/幫助。謝謝！

Answer 1

換句話說，你想要解釋一下這個JavaScript的功能嗎？

$.get('file1.php', function(data){ 
    $('#dropdown1').html(data); 
}); 

第一個AJAX調用加載從file1.php輸出到元素與ID dropdown1作爲HTML內容 - 想必這是一個選擇標記，以便你想要<option>元素的列表。

$('#dropdown1').change(function(){ 
    $.get('file2.php',{ make: $(this).val() }, function(data){ 
     $('#dropdown2').html(data); 
    }); 
}); 

這第二個調用file2.php?make=abc其中ABC是在dropdown1選擇的值和再次加載的所述內容轉換成dropdown2爲HTML。所以大概你又想輸出一個<option>元素的列表。

然而，有很多方法可以做到這一點，例如，返回JSON數據列表，然後將它們組裝到客戶端的選項中。特別是，你可以存儲最後選定的值，以防用戶在列表之間切換，將兩個下拉菜單切換爲「加載」或類似的狀態，同時等待AJAX​​呼叫完成等。