講一下利用 jQuery 透過 json 資料更新輸入欄位的做法。

這裡不是用 API 的方式，我直接從資料庫透過 PHP 把資料撈出來：

$stmt=$db_host->prepare("SELECT * FROM users");
try{
    $stmt->execute();
    $rows=$stmt->fetchAll(PDO::FETCH_ASSOC);
}catch(PDOExecption $e){
    echo "讀取資料失敗";
}

 

接著把資料存到 json：

let users=<?=json_encode($rows)?>;

 

然後建立 UI 如下：

<div>
  <div class="form-group">
    <select class="form-control" name="" id="users">
    <?php foreach($rows as $value){ ?>
      <option value="<?=$value["id"]?>"><?=$value["name"]?></option>
    <?php } ?>
    </select>
  </div>
  <div class="form-group">
    <label for="">name</label>
    <input type="text" class="form-control" id="name">
  </div>
  <div class="form-group">
    <label for="">email</label>
    <input type="email" class="form-control" id="email">
  </div>
</div>

 

接著就透過選取的值是哪個，再去篩選出 json 的內容後更新輸入欄位就好了：

$("#users").change(function(){
  let id=$(this).val();
  let user=users.find((user)=>{
    return user.id===id;
  })
  $("#name").val(user.name);
  $("#email").val(user.email);
})