セレクトボックスを未選択の状態にするには？

html / css / javascriptの初心者です。

いろいろなサイトで勉強しながら、アンケートフォーム（メールフォーム）を作っています。

所在地を選択してもらうのに、最初にラジオボタンで「関東」などのよう地域を選択してもらってから、都道府県をセレクトボックスで選択してもらうように作りました。

ラジオボタンを選択したら、都道府県を選ぶセレクションボックスのところにその地域の都道府県を表示するところまではできました。

しかし、例えば、最初に「関東」→「東京」と選択したあとに、選択し直して「北海道・東北」→「福島」と選択すると、「東京」の値が残ってしまいます。選択し直した場合に、他のセレクトボックスの値を未選択の状態（nullにするということであっていますか？）にするにはどうしたらいいでしょうか？

<script type="text/javascript">
function entryChange1(){
radio = document.getElementsByName('所在地')
if(radio[0].checked) {
document.getElementById('firstBox').style.display = "";
document.getElementById('secondBox').style.display = "none";
document.getElementById('thirdBox').style.display = "none";
document.getElementById('fourthBox').style.display = "none";
document.getElementById('fifthBox').style.display = "none";
document.getElementById('sixthBox').style.display = "none";
document.getElementById('seventhBox').style.display = "none";
}else if(radio[1].checked) {
document.getElementById('firstBox').style.display = "none";
document.getElementById('secondBox').style.display = "";
document.getElementById('thirdBox').style.display = "none";
document.getElementById('fourthBox').style.display = "none";
document.getElementById('fifthBox').style.display = "none";
document.getElementById('sixthBox').style.display = "none";
document.getElementById('seventhBox').style.display = "none";

＜途中省略＞

}else if(radio[6].checked) {
document.getElementById('firstBox').style.display = "none";
document.getElementById('secondBox').style.display = "none";
document.getElementById('thirdBox').style.display = "none";;
document.getElementById('fourthBox').style.display = "none";
document.getElementById('fifthBox').style.display = "none";
document.getElementById('sixthBox').style.display = "none";
document.getElementById('seventhBox').style.display = "";
}
}
//オンロードさせ、リロード時に選択を保持
window.onload = entryChange1;
</script>


<tr id="firstBox">
<th class="col-xs-5 col-md-3">所在地<font color="red"><b>※必須</b></font></th>
<td class="col-xs-5 col-md-7">
<select name="北海道・東北">
<option value="" selected>-- 選択して下さい --</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
</select>
</td>
</tr>
<tr id="secondBox">
<th class="col-xs-5 col-md-3">所在地<font color="red"><b>※必須</b></font></th>
<td class="col-xs-5 col-md-7">
<select name="関東">
<option value="" selected>-- 選択して下さい --</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
</select>
</td>
</tr>

＜以下省略＞

何か解決のヒントか参考のサイトなど紹介していただけると助かります。

よろしくお願いいたします。m(__)m

No.1 ベストアンサー 回答者： yambejp 回答日時： 2016/06/21 10:18

style.display = "none"しても表示を消してるだけですからね

disabled=tureも併用してください

逆に表示するときにstyle.display = "" すると同時に
disabled=falseするように

この回答へのお礼

回答ありがとうございました。

まだ時間がなくて、できるかどうか試していません。

週末までには試してみます。

お礼日時：2016/06/21 22:13

No.2 回答者： Ogre7077 回答日時： 2016/06/21 10:53

<script>window.addEventListener('DOMContentLoaded',function(_){

_ ; var form = document.forms['a'];
_ ; function choice() {
_ ; _ ; var v = form.elements['block'].value;
_ ; _ ; var x = form.elements['port'];
_ ; _ ; for (var i=0; i<x.length; i++) {
_ ; _ ; _ ; var selector = x[i], valid = (selector.dataset.block == v);
_ ; _ ; _ ; selector.style.display = valid? '': 'none'; // 対象外は表示させない
_ ; _ ; _ ; selector.selectedIndex = valid? selector.selectedIndex: 0; // 対象外は未選択にする
_ ; _ ; }
_ ; }
_ ; choice(); // 初期表示時
_ ; form.addEventListener('change',choice,false); // 値が変わったとき
},false)</script>

<form name=a>
<label><input type=radio name=block value=n>北</label>
<label><input type=radio name=block value=e>東</label>
<label><input type=radio name=block value=w>西</label>
<label><input type=radio name=block value=s>南</label>
<select data-block=n name=port> <option>- <option value=cc>札幌 <option value=ss>仙台 </select>
<select data-block=e name=port> <option>- <option value=tt>羽田 <option value=aa>成田 </select>
<select data-block=w name=port> <option>- <option value=gg>中部 <option value=bb>関空 </select>
<select data-block=s name=port> <option>- <option value=ff>福岡 <option value=ah>那覇 </select>
</form>

この回答へのお礼

回答ありがとうございました。

ちょっと時間がなくて、提示していただいたコードが読み解けていないのですが、週末までには頑張ってみたいと思っています。

お礼日時：2016/06/21 22:15