フォームの内容を後から変える MENU
男の子用・女の子用の２通りのプレゼントを用意しました。
どちらか選んでください。
男の子用
女の子用
Source 
    
<HTML lang="ja">
<HEAD>
<TITLE>フォームの内容を後から変える</TITLE>
<SCRIPT>
function BY(PR) {
  PR.pr.options[0].text = "男の子用のプレゼント";
  PR.pr.options[1].text = "プラモデル";
  PR.pr.options[2].text = "スニーカー";
  PR.pr.options[3].text = "おもちゃの缶詰（男の子用）";
  document.getElementById("divid").innerHTML= "";
  selid.selectedIndex = 0;
}
function GR(PR) {
  PR.pr.options[0].text = "女の子用のプレゼント";
  PR.pr.options[1].text = "テディーベアー";
  PR.pr.options[2].text = "ドレス";
  PR.pr.options[3].text = "おもちゃの缶詰（女の子用）";
  document.getElementById("divid").innerHTML= "";
  selid.selectedIndex = 0;
}
function selclik() {
    let select_number = selid.selectedIndex;
    let wkmsg = document.getElementById("selid").value;
    if(select_number == 0) {
        return;
    }
    document.getElementById("divid").innerHTML= wkmsg;
}
</SCRIPT>
</HEAD>
<body>
<FORM NAME="BORG">
<table align="center" width="600px">
<tr><td colspan="2">
男の子用・女の子用の２通りのプレゼントを用意しました。
どちらか選んでください。
</td></tr>
<tr><td colspan="2">
<INPUT TYPE="radio" NAME="borg" VALUE="BOY" onClick="BY(this.form)">男の子用<br>
<INPUT TYPE="radio" NAME="borg" VALUE="GIR" onClick="GR(this.form)">女の子用<br>
</td></tr>
<tr><td width="280px">
<select name="pr" id="selid" onclick="selclik()" style="width: 300px;">
<option>男の子用・女の子用どちらか選んで下さい</option>
<option>--------------------------------------</option>
<option>--------------------------------------</option>
<option>--------------------------------------</option>
<option></option>
</select>
</td><td>
<div id="divid"></div>
</td></tr>
</table>
</form>
</BODY>
</HTML>