JavaScriptを利用して連動型プルダウンを作成しています。
1つ目のプルダウンから市を選ぶと、2つ目のプルダウンには
その市にある小学校がデータベースを参照して表示される仕組みです。
PCやAndroidのスマホではうまく機能するのですが
iPhoneのSafariで操作すると、1つ目のプルダウンで市を選択しても
2つ目のプルダウンでは他の市にある小学校も表示されます。
小学校を絞り込むJavaScriptがうまく機能していない可能性が高いです。
iPhoneのSafariで操作しても
うまく動くための手がかりを教えていただけませんでしょうか。
ソースは下記の通りです。
<select name="schoolcity">
<option value="">市</option>
<option value="">---------</option>
<?
「データベースにある市を全てデータベースから引っ張る意味の文字列」
while ($LowCity = mysql_fetch_assoc($recordSet)){
$SCITY_ID=htmlspecialchars($LowCity['city_id']);
$SCITY_NAME=htmlspecialchars($LowCity['city_name']);
?>
<option value="<?=$SCITY_ID?>" class="<?=$SCITY_ID?>" <?if($SCITY_ID==$SCHOOLCITY){echo 'selected';}?>><?=$SCITY_NAME?></option>
<?}?>
</select>
<select name="eschool">
<option class="none" value="">小学校区</option>
<option class="none" value="">---------</option>
<?
「1つ目のプルダウンで選んだ市にある小学校をデータベースから引っ張る意味の文字列」
while ($School = mysql_fetch_assoc($recordSet)){
$SC_CITYID=htmlspecialchars($School['sc_city_id']);
$SC_ID=htmlspecialchars($School['sc_id']);
$SC_NAME=htmlspecialchars($School['sc_name']);
?>
<option value="<?=$SC_NAME?>" class="<?=$School[sc_city_id]?>"<?if($SC_CITYID!=$SCHOOLCITY){echo 'style=" display: none;"';}?> <?if($SC_NAME==$ESCHOOL){echo 'selected';}?>><?=$SC_NAME?></option>
<?}?>
</select>
<script>
$(function() {
// 市が変更されたら発動
$('select[name="schoolcity"]').focusout(function() {
// 選択されている市のクラス名を取得
var CityName = $('select[name="schoolcity"] option:selected').attr("class");
console.log(CityName);
// 小学校の要素数を取得
var ESchoolcount = $('select[name="eschool"]').children().length;
// 小学校の要素数分、for文で回す
for (var i=0; i<ESchoolcount; i++) {
var ESchool = $('select[name="eschool"] option:eq(' + i + ')');
if(ESchool.attr("class") === CityName) {
// 選択した市と同じクラス名だった場合
// 小学校の要素を表示
ESchool.show();
}else {
// 選択した市とクラス名が違った場合
// 小学校の要素を非表示
ESchool.hide();
}
}
$('select[name="eschool<?=$s?>"] option:selected').attr("selected", false);
$('.none').show();
$('select[name="eschool<?=$s?>"] option.none').eq(0).attr('selected', true);
})
})
</script>
Q&A
