本来チェックボックスは
name属性やいろいろ要るが、
今回は割愛で
<label>
<input type="checkbox">八ツ橋
</label>
こういうのを作りたい
for文で回す
タグを含めて書き出したいのでhtmlメソッドを使う
--->test.js
$(function(){
//console.log("hogehoge");
$('#s1').on('change',function(){
$.ajax({
url:'foods_api.php',
data:{'p_id':$('#s1').val()},
type:'get',
dataType:'json',
})
.done(function(d){
$('#lists').empty();
for(var i=0; i<d.length; i++){
var elehoge = $('<label>').html('<input type="checkbox">'+d[i].food);
$('#lists').append(elehoge);
}
})
.fail(function(){
console.log("not conected");
});
});
});
--->foods_api.php
<?php
if(empty($_GET["p_id"])){
exit();//処理を停止
}
$user="root";
$pass="";
$host="localhost";
$dbname="school";
$dsn="mysql:host={$host};dbname={$dbname};charset=utf8";
$pdo = new PDO($dsn,$user,$pass);
$sql="SELECT * FROM foods WHERE p_id=:p_id";
$stmt=$pdo->prepare($sql);
$stmt->bindValue(":p_id", $_GET["p_id"],PDO::PARAM_INT);
$stmt->execute();
$foods = $stmt->fetchAll(PDO::FETCH_ASSOC);//連想配列としてフェッチした結果を受け取る
//$foods[0]["p_id"],$foods[0]["food"];
//print_r($foods);
$json = json_encode($foods);
echo $json;
?>
--->test1.php
<?php
$user="root";
$pass="";
$host="localhost";
$dbname="school";
$dsn="mysql:host={$host};dbname={$dbname};charset=utf8";
$pdo=new PDO($dsn,$user,$pass);
$sql="SELECT * FROM prefs";//全部取ってくる
$res=$pdo->query($sql);
//結果セットをばらすフェッチは下でやる
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>練習</title>
<link rel="stylesheet" href="css/style.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>test01</h1>
<div id="container">
<form action="" method="post">
<select name="s1" id="s1">
<option value="">都道府県を選択</option><!--ダミーなので値無し-->
<?php while ($row=$res->fetch(PDO::FETCH_ASSOC)): ?>
<option value="<?php echo $row["p_id"]; ?>">
<?php echo htmlspecialchars($row["pref"],ENT_QUOTES); ?>
</option>
<?php endwhile; ?>
</select>
<div id="lists">
</div>
</form>
</div>
<script src="js/test.js"></script>
</body>
</html>
なおブラウザのフォントも変えられる
UD Digi Kyokasyoとか先生はお気に入りらしい
chrome
→設定
→デザイン
→フォントをカスタマイズ
まったく関係ないけどなつくウツボがかわいい
もふられるサメさん
