javascriptでの2つのプルダウンメニューの初期値
下記の2つの連動するセレクトメニューで最初の国名のプルダウンで「日本」を選択、次の都市名のプルダウンで「東京」を選択し、
その後ブラウザの戻るボタンで戻り後、再びページを表示させたり、または入力内容確認画面へ進みjavascriptのonclick="history.back()"で入力ページ（下記スクリプト記述ページ）に戻ると1つ目の国名のメニューは日本が表示されていますが、2つ目の都市名のメニューが空白になってしまいます。
そのため、都市名のプルダウンで東京を表示させるには、1つ目の国名のプルダウンを一度日本以外にしてから再度日本に表示させるといった動作が必要になってしまっています。
そこで、都市名のメニューを空白にさせずにそのまま表示させるように色々調べたのですが、解決策がありませんでした。
そこで、せめて両方のプルダウンともに「国を選択して下さい」にした状態にはできないかと考えております。
何か良い方法がありましたらば教えて頂けませんでしょうか？
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById("selMain").onchange = function(){
var selNo = this.selectedIndex;
var selObj = document.getElementById("selSub");
var optionData = [
["国名を選択してください,"],
["東京,tokyo","大阪,osaka","名古屋,nagoya"],
["ニューヨーク,ny","ロサンゼルス,la"]
];
var i, tmp = [];
while(selObj.hasChildNodes()) {
selObj.removeChild(selObj.firstChild);
}
for (var i=0; i<optionData[selNo].length; i++){
tmp = optionData[selNo][i].split(",");
selObj.options[i] = new Option(tmp[0], tmp[1]);
}
}
}
</script>
</head>
<body>
<form action="./enq.cgi" method="get" id="mainForm" name="mainForm">
<select id="selMain">
<option value="" selected>国を選択してください</option>
<option value="jp">日本</option>
<option value="usa">アメリカ</option>
</select>
<select id="selSub">
<option value="">国を選択してください</option>
</select>
</form>
</body>
</html>
