<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript">
$(function(){
let data0 =[{name:"",id:"0"}];
let data1=[{name:"",id:"0"},{name:"東京",id:"1"},{name:"大阪",id:"2"},{name:"京都",id:"3"}];
let data2=[{name:"",id:"0"},{name:"ワシントン",id:"1"},{name:"シアトル",id:"2"},{name:"コロラド",id:"3"}];
let data3=[{name:"",id:"0"},{name:"北京",id:"1"},{name:"上海",id:"2"},{name:"香港",id:"3"}];
let city_data = undefined;
// 地域エリアを選択した場合、対応するオプションがselect要素に設定する。
$('[name = area]').on('change',function(){
let area_val = $(this).val();
switch(area_val){
case "0" :
city_data = data0;
break;
case "1":
city_data = data1;
break;
case "2" :
city_data = data2;
break;
case "3" :
city_data = data3;
break;
default:
break;
}
// selectタグのoption値を一旦削除
$('[name = city] option').remove();
// 新たにoptionを設定する。
let selectItem = "";
$.each(city_data,function(index,data){
$('[name = city]').append($('<option>').text(data.name).val(data.id));
if(index == 1){
// data1 data2 data3の2番目の値を選択状態にする。
selectItem = data.id;
}
});
$('[name = city] option').attr("selected", false);
$('[name = city]').val(selectItem);
$('[name = city]').selectmenu('refresh');
})
});
</script>
</head>
<body>
<div>
<div class="form">
<form name="country" >
<label for="area_name">国名</label>
<select id="area_name" name="area" size="1">
<option value="0"></option>
<option value="1">日本</option>
<option value="2">アメリカ</option>
<option value="3">中国</option>
</select>
<label for="city _name">都市名</label>
<select id="city _name" name="city" size="1">
<option value="0"></option>
<option value="1">ワシントン</option>
<option value="2">シアトル</option>
<option value="3">コロラド</option>
</select>
</form>
</div>
</body>
</html>
講座について
