選択ボックスで選んだものに応じて値を変更する方法

質問

片方の選択ボックスで選んだものに応じて
もう片方の選択ボックスの表示内容を変更したいと思います。

「なす」を選んだら３０円
「きゅうり」を選んだら４０円
「ねぎ」を選んだら５０円
「選んで下さい。」を選んだら０円（初期値）
としたいと思うのですが、下記内容をどのように
変更すればよろしいのでしょうか。
教えて下さい。

<table border="0" width="700">
<tr>
<td width="50%">
<select name="野菜">
<option value="SENTAKU">選んで下さい。</option>
<option value="NASU">なす</option>
<option value="KYUURI">きゅうり</option>
<option value="NEGI">ねぎ</option>
</select>
</td>
<td>
<select name="値段">
<option value="NEDAN">０円</option>
</select>
</td>
</tr>
</table>

回答No.2

yukichance · ベストアンサー

非活性にするならば、望みのselectに、disabled追加です。
ただし、あからさま薄くなるので、input、readOnlyの利用がおすすめです。

以下改変例―
<table border="0" width="700">
<tr>
<td width="50%">
<select name="野菜"
onchange="javascript:document.getElementById('値段').value=this.options[this.selectedIndex].title;"
>

<option value="SENTAKU" title="０円" selected >選んで下さい。</option>
<option value="NASU" title="３０円">なす</option>
<option value="KYUURI" title="４０円">きゅうり</option>
<option value="NEGI" title="５０円">ねぎ</option>
</select>
</td>
<td>

<input name="値段" readOnly title="NEDAN" value="０円" size="8">

</td>
</tr>
</table>

お礼

ご回答頂き、大変感謝しております。
丁寧な改変例、良くわかりました。

回答No.1

yukichance

双方のoption value同期させ、
select value代入でできますよ。
後は、onchange、this.value利用して。
以下、変更例－
<table border="0" width="700">
<tr>
<td width="50%">
<select name="野菜"
onchange="javascript:document.getElementById('値段').value=this.value;"
>
<option value="SENTAKU">選んで下さい。</option>
<option value="NASU">なす</option>
<option value="KYUURI">きゅうり</option>
<option value="NEGI">ねぎ</option>
</select>
</td>
<td>
<select name="値段">
<option value="SENTAKU">０円</option>
<option value="NASU">３０円</option>
<option value="KYUURI">４０円</option>
<option value="NEGI">５０円</option>
</select>
</td>
</tr>
</table>

補足

早々のご回答に大変感謝しております。
内容確認致しました。
因みに、値段側の選択ボックスを
非活性の選択ボックス（表示だけの選択ボックス）
に変更することは可能でしょうか。