如何更新1個下拉菜單和動態使用AJAX和jQuery

Question

我有兩個下拉列表和4個文本字段4個文本字段值。 現在我想根據第一個下拉值來更改文本字段的值和第二個下拉列表。

我成功了一次dyanmically改變我的網站（無論是第2個下拉菜單或文本字段）的唯一單個部分的價值。我沒有得到如何更新所有五（1 + 4）動態，同時

Answer 1

需要了解更多信息，您實際審理或者不，什麼工作，你從阿賈克斯得到什麼，...到幫助......但是，基本上，並根據你的方式似乎做（或者，你希望它做的方式）的JS（jQuery的）應該是這樣的：

$(document).on('change','#yourWardSelectId',function(event){ 
    var currentValue = $(this).val(); 
    $.ajax({ 
     method : 'POST', //or get, or whatever 
     url : 'whatever', //your url 
     data : {'myValue':currentValue}, //the data you post 
     dataType : 'json', 
     success : function(dataReturned){ 
      //here is what you do on success 
      $('#corporatorFieldId').val(dataReturned.corporator); 
      $('#zoneNameFieldId').val(dataReturned.zoneName); 
      $('#whateverId').val(dataReturned.whateverValue); 
     }, 
     error : function(dataReturned){ 
      //handle your error 
     } 
    }); 
}); 

這是你來自哪裏，一個Ajax請求得到所有數據的情況下... 不要使用「HTML」，而是用「.VAL」你的項目設置內在價值。

這裏是「whatever.php」一「過於簡單化」 PHP例如，考慮使用PDO：

<?php 
    //returns a pdo instance 
    $db = connect(); 
    $whatIWant = $_POST['myValue']; 
    //prepare statement 
    $query = $db->prepare("SELECT name,town,age FROM people WHERE searchField = :val"); 
    $query->execute([':val'=>$whatIWant]); 
    $result = $query->fetchAll(PDO::FETCH_ASSOC); 
    echo json_encode($result); 
?> 

這塊PHP將返回一個JSON數組，看起來像這樣：

name | town | age 

---

myName | myTown | 30 

所以，在你的JS部分，得到這樣的價值觀：

var name = dataReturned.name; 
var town = dataReturned.town; 
var age = dataReturned.age; 

的，如果你想「考察」你返回的數據，你可以做2個例子：

console.log(JSON.stringify(dataReturned)); 
console.log(dataReturned.responseText);