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

いまいちやりたいことがわからないのですが、
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

良いも悪いもvalueが送られるんだから" x1"になるのは当然なんじゃないのかな・・・
javascriptも使ってるっていうなら何番目の項目が選択されているのかを調べる事はできるよ

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

補足

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

回答No.1

yambejp

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

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

補足

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

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