セレクトボックスの値を取得して一定のものが選べられたら次のボックスで選択不可のものを出す方法

<script type="text/javascript"><!--
function onButtonClick(){ }

var select_toukyou = document.getElementById('toukyou');
var select_oosaka = document.getElementById('oosaka');
-->
</script>
<select name ="toukyou" id="ringo">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
<select name ="oosaka" id="mikan">
<option value="0">a</option>
<option value="1">b</option>
<option value="2">c</option>
<option value="3">d</option>
</select>
<div class="buttons">
<input type="button" value="ボタン" onclick="onButtonClick()";>
<p>詳細（しょうさい）</p><br>
<input type="text" value="" id="ボックス"><br>
<p>番号（ばんごう）</p><br>
<input type="text" value="" id="箱"><br>
</div>
</form>

そもそもがめちゃくちゃかもしれませんが、ここからボタンを押すと"ボックス"に番号が、"箱"にテキストが入るようにしたいです。しかも上で0を選択した場合は下で0以外選択できないようにしたいです。
選択肢には残したまま選択できないようにしたいです。
分かりにくい説明で悪いんですけど、どなたかお願いします。

No.1 回答者： yambejp 回答日時： 2016/10/11 11:28

全体的にこんなかんじですが、そうとう違和感があります

<script>
function onButtonClick(){
var val_toukyou = document.getElementById('ringo').options[document.getElementById('ringo').selectedIndex].value;
var txt_toukyou = document.getElementById('ringo').options[document.getElementById('ringo').selectedIndex].text;
document.getElementById('box').value=val_toukyou;
document.getElementById('hako').value=txt_toukyou;

}
</script>
<select name ="toukyou" id="ringo" onchange="document.getElementById('mikan').selectedIndex=this.selectedIndex">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
<select name ="oosaka" id="mikan" onchange="this.selectedIndex=document.getElementById('ringo').selectedIndex">
<option value="0">a</option>
<option value="1">b</option>
<option value="2">c</option>
<option value="3">d</option>
</select>
<div class="buttons">
<input type="button" value="ボタン" onclick="onButtonClick()";>
<p>詳細（しょうさい）</p><br>
<input type="text" value="" id="box"><br>
<p>番号（ばんごう）</p><br>
<input type="text" value="" id="hako"><br>
</div>
</form>