3つの連動したプルダウンメニューのフォームについて

http://d.hatena.ne.jp/Mars/20071109

こちらのページを参考にしてフォームの中身を以下ようにしたいのです。

このような感じです
<select id=”SEL1”>
<optgroup label=”choise”>
<option value=”fruit”>フルーツ</option>
<option value=”vegetable”>野菜</option>
</select>
<select id=”SEL2”>
<optgroup label=”fruits”>
<option value=”x1”>みかん</option>
<option value=”x1”>りんご</option>
<option value=”x1”>メロン</option>
</optgroup>
<optgroup label=”vegetable”>
<option value=”x1”>キャベツ</option>
<option value=”x1”>きゅうり</option>
<option value=”x1”>トマト</option>
</optgroup>
</select>
<select id=”SEL3”>
<optgroup label=”x1”>
<option>1個</option>
<option>2個</option>
<option>3個</option>
<option>4個</option>
<option>5個</option>
<option>6個</option>
</optgroup>
</select>

このようにプルダウンメニューを３階層にして、3段階目に繋げる２段階目のoption valueは全て同じにしたいのですが、
そうすると、フォームで送信した結果が　select id=SEL2 のところで全てが ”x1”になってしまい各商品の名前を出すことができません。

何か方法があれば教えてください。

使っているジャバスクリプトは以下です
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();
}

No.3 回答者： yambejp 回答日時： 2008/05/20 18:32

いまいちやりたいことがわからないのですが、

optgroupは単なるグルーピングなので、それと何かをあわせる必要は
ありません。
ただ以下のようにすると、フルーツを選ぶとフルーツの先頭、野菜を
選ぶと野菜の先頭に選択を移動することは可能です。

<script>
window.onload=setSelect;

function setSelect(){
var s1=document.getElementById("SEL1");
s1.onchange=function(){
var s2=document.getElementById("SEL2");
var og=s2.firstChild;
while(og){
if(og.label==this.value){
var op=og.firstChild;
while(op){
if(op.tagName=="OPTION"){
op.selected=true;
op=og.lastChild;
}
op=op.nextSibling;
}
}
og=og.nextSibling;
}
}
}
</script>

<select id="SEL1" name="SEL1">
<optgroup label="choise">
<option value="fruit">フルーツ</option>
<option value="vegetable">野菜</option>
</select>
<select id="SEL2" name="SEL2">
<optgroup label="fruit" >
<option value="orange">みかん</option>
<option value="apple">りんご</option>
<option value="meron">メロン</option>
</optgroup>
<optgroup label="vegetable">
<option value="cabbage">キャベツ</option>
<option value="cucumber">きゅうり</option>
<option value="tomato">トマト</option>
</optgroup>
</select>
<select id="SEL3" name="SEL3">
<option value="1">1個</option>
<option value="2">2個</option>
<option value="3">3個</option>
<option value="4">4個</option>
<option value="5">5個</option>
<option value="6">6個</option>
</select>

No.2 回答者： SAYKA 回答日時： 2008/05/20 15:10

良いも悪いもvalueが送られるんだから" x1"になるのは当然なんじゃないのかな・・・

javascriptも使ってるっていうなら何番目の項目が選択されているのかを調べる事はできるよ

http://www.tohoho-web.com/js/form.htm#selectedIn …

この回答への補足

ご回答ありがとうございます。
javascriptの知識は全くなく、参考にしたＨＰからコピペしたんです。
SEL2で選択したデータを送信したいですがこのサンプルでは無理ですかね。。

補足日時：2008/05/20 16:07

No.1 回答者： yambejp 回答日時： 2008/05/20 15:09

idだけでnameがなければサーバーにデータはおくられないと思いますが・・・

で、nameをつけたとしてvalueをx1にしているのですから送られるデータは
x1で何の問題もないと思いますが、いったいなんのためにx1にしてあって、
送りたいデータはどのデータなのでしょうか？
３つのセレクトの関連性も含めて提示したほうがよいでしょう

この回答への補足

ご回答ありがとうございます。
はい、nameを付け加えるのを忘れていましたすみません。

送りたいデータの内容は、もしフルーツを選んだ場合fruitが送られますよね、
そして連動したプルダウンからりんごを選びたい場合、続けてSEL3の個数も選べるようにしたいのですが、そうするとSEL2でvalueをx1にしたため、りんごのデータが送信されずvalueのｘ1が送信されてしまいます。
(ＳＥＬ2のvalue名は連動するためにはSEL3のoptgroup label名と同じにしないといけないんですよね？）
説明が下手で申し訳ございません。
java scriptの知識が全くなく、参考にしたHPを修正して作ったので、javascriptの知識がなくては無理でしたらあきらめます。

補足日時：2008/05/20 15:59