如何使用ajax和jquery动态更新1个下拉列表和4个文本字段值

Question

我有两个下拉列表和4个文本字段。 现在，我想根据第一个下拉列表的值更改文本字段和第二个下拉列表的值。

我成功地一次一次更改了我网站的仅单个部分（第二个下拉列表或文本字段）的值。 我没有得到如何同时动态地更新所有五个（1 + 4）的信息

Answer 1

需要更多信息，您实际尝试过或未尝试过的内容，正在起作用的内容，从ajax中获得的内容，...以寻求帮助...但是，基本上，并且基于您似乎在做的事情（或您想要的方式）完成））您的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”来设置内部值。

考虑到您使用PDO，这是“ whatever.php”的“过度简化”的php示例：

<?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 ARRAY：

name    |    town    |    age

---

myName  |    myTown  |    30

因此，在您的JS部分中，获取如下所示的值：

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

如果想“检查”返回的数据，可以做两个例子：

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