html&jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
<select id="sel">
<option> --場所を選ぶ-- </option>
<option value="kyoto">京都</option>
<option value="osaka">大阪</option>
<option value="kobe">神戸</option>
</select>
<div id="mes">
集合場所は<span id="pos"></span>
集合時刻は<span id="time"></span>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
let optval;
$(function(){
$('#sel').on("change",function(){
optval = $(this).val();
$.post({
url: 'ajax_getData.php',
data: {
'opt': optval
},
dataType: 'json',
}).done(function(data){
$("#pos").text(data.position);
$("#time").text(data.ap_time);
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
})
})
})
</script>
</body>
</html>
ajax_getData.php
header("Content-Type: application/json; charset=UTF-8");
$ary_sel_obj = [];
$opt = filter_input(INPUT_POST, "opt");
$ary_lists = [
"kyoto" => [
"position" => "三条",
"ap_time" => "12:00",
],
"osaka" => [
"position" => "難波",
"ap_time" => "12:30",
],
"kobe" => [
"position" => "西宮",
"ap_time" => "13:00",
],
];
if(isset($ary_lists)) $ary_sel_obj = $ary_lists[$opt];
echo json_encode($ary_sel_obj);
exit;
jsonデータが変わった時の処理としては、js側でデータを保持しておいて、jsonデータが変わったら、値を変えれば良さそう
うん、ある程度イメージは出来てきたかな🥰
