javascriptで選択肢が分かれるプルダウンでcgiにデータを送るには？
下記のように、javascriptで選択肢が変化するプルダウンを使用してcgiにデータを送りたいのですが、この方法ですと一番最初の選択肢である「果物・肉」の部分のデータしかcgiに送れません。
例えば「果物・梨・20世紀梨」や「肉・鶏肉・比内地鶏」というように、選択したすべてのデータをcgiに送れるようにするにはどうすればよいのでしょうか？
分かりづらい説明で申し訳ありません。
補足説明致しますので、どうかご教授下さいますようお願い致します。
以下がサンプルソースです。
<html>
<head>
<script type="text/javascript">
<!--
function ConnectedSelect(selIdList){
for(var i=0;selIdList[i];i++) {
var CS = new Object();
var obj = document.getElementById(selIdList[i]);
if(i){
CS.node=document.createElement('select');
var GR = obj.getElementsByTagName('optgroup');
while(GR[0]) {
CS.node.appendChild(GR[0].cloneNode(true));
obj.removeChild(GR[0]);
}
obj.disabled = true;
}
if(selIdList[i+1]) {
CS.nextSelect = document.getElementById(selIdList[i+1]);
obj.onchange = function(){ConnectedSelectEnabledSelect(this)};
} else {
CS.nextSelect = false;
}
obj.ConnectedSelect = CS;
}
}
function ConnectedSelectEnabledSelect(oSel){
var oVal = oSel.options[oSel.selectedIndex].value;
if(oVal) {
while(oSel.ConnectedSelect.nextSelect.options[1])oSel.ConnectedSelect.nextSelect.remove(1);
var eF = false;
for(var OG=oSel.ConnectedSelect.nextSelect.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) {
if(OG.label == oVal) {
eF = true;
for(var OP=OG.firstChild;OP;OP=OP.nextSibling)
oSel.ConnectedSelect.nextSelect.appendChild(OP.cloneNode(true));
break;
}
}
oSel.ConnectedSelect.nextSelect.disabled = !eF;
} else {
oSel.ConnectedSelect.nextSelect.selectedIndex = 0;
oSel.ConnectedSelect.nextSelect.disabled = true;
}
if(oSel.ConnectedSelect.nextSelect.onchange)oSel.ConnectedSelect.nextSelect.onchange();
}
-->
</script>
</head>
<body>
<form method="POST" action="http://www.●●.com/●●.cgi">
<input type="hidden" name="mode" value="regist" />
<select name="item" id="sel1">
<option value="果物">果物</option>
<option value="肉">肉</option>
</select>
<select name="" id="sel2">
<optgroup label="果物">
<option value="梨">梨</option>
<option value="りんご">りんご</option>
</optgroup>
<optgroup label="肉">
<option value="牛肉">牛肉</option>
<option value="鶏肉">鶏肉</option>
</optgroup>
</select>
<select name="" id="sel3">
<optgroup label="梨">
<option value="20世紀梨">20世紀梨</option>
<option value="ラフランス">ラフランス</option>
</optgroup>
<optgroup label="りんご">
<option value="ふじ">ふじ</option>
<option value="つがる">つがる</option>
</optgroup>
<optgroup label="牛肉">
<option value="和牛">和牛</option>
<option value="アメリカ牛">アメリカ牛</option>
</optgroup>
<optgroup label="鶏肉">
<option value="名古屋コーチン">名古屋コーチン</option>
<option value="比内地鶏">比内地鶏</option>
</optgroup>
</select>
<script type="text/javascript">
ConnectedSelect(['sel1','sel2','sel3']);
</script>
<input type="submit"></form>
</body>
</html>
お礼
早速の返信ありがとうございます。 めっちゃ美味そうですね！