※ ChatGPTを利用し、要約された質問です(原文:JavaScriptのセレクトボックスの連動について)
JavaScriptのセレクトボックスの連動について
このQ&Aのポイント
JavaScriptにて連動するセレクトボックスを作成しました。
神奈川県 小田原市と選択し、ブラウザの更新をかけると、神奈川県 渋谷区になってしまいます。
ブラウザの更新をかけた際に、双方のセレクトボックスを初期状態にするには、どうしたらよいでしょうか?
JavaScriptのセレクトボックスの連動について
JavaScriptにて連動するセレクトボックスを作成しました。
ソースは下記となります。
====================================================
<html>
<head>
<title>複数のSELECT タグ連動</title>
<script type="text/javascript">
<!--
function selectBox(n){
var idParent='parent_'+n;
var idChild='child_'+n;
document.getElementById(idChild).length=1;
document.getElementById(idChild).selectedIndex=0;
var child = childArray[document.getElementById(idParent).selectedIndex];
document.getElementById(idChild).length=child.length;
for(var i=0;i < child.length;i++){
document.getElementById(idChild).options[i].text = child[i];
}
}
var childArray = new Array();
childArray[0]=new Array("渋谷区","品川区","港区","新宿区");
childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市");
childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市");
// -->
</script>
</head>
<body>
<form name="myform" method="POST" action"#">
<select id="parent_0" onchange="selectBox(0)">
<option>東京都</option>
<option>神奈川県</option>
<option>静岡県</option>
</select>
<select id="child_0">
<option>渋谷区</option>
<option>品川区</option>
<option>港区</option>
<option>新宿区</option>
</select>
<br />
<select id="parent_1" onchange="selectBox(1)">
<option>東京都</option>
<option>神奈川県</option>
<option>静岡県</option>
</select>
<select id="child_1">
<option>渋谷区</option>
<option>品川区</option>
<option>港区</option>
<option>新宿区</option>
</select>
<br />
<select id="parent_2" onchange="selectBox(2)">
<option>東京都</option>
<option>神奈川県</option>
<option>静岡県</option>
</select>
<select id="child_2">
<option>渋谷区</option>
<option>品川区</option>
<option>港区</option>
<option>新宿区</option>
</select>
<br />
</form>
</body>
</html>
====================================================
上記のソースで想定の動きをしてくれているのですが、
例えば、
神奈川県 小田原市
と選択し、ブラウザの更新をかけると、
神奈川県 渋谷区
になってしまいます。
ブラウザの更新をかけた際に、
双方のセレクトボックスを初期状態にするには、どうしたらよいでしょうか?
よろしくお願いします。
お礼
window.onload=function(){ var s=document.getElementsByTagName("select"); for(var i=0;i<s.length;i++){ s[i].selectedIndex=0; } } で実行したところ、 処理させたかった動きになりました。 ありがとうございました。