人に聞けない痔の悩み、これでスッキリ >>

下記のように、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>

このQ&Aに関連する最新のQ&A

A 回答 (3件)

//@cc_on


var opt = [];
opt['最初'] = '果物 肉';
opt['果物'] = '梨 りんご';
opt['梨'] = '20世紀梨 ラフランス';
opt['りんご'] = 'ふじ つがる';
opt['肉'] = '牛肉 鶏肉';
opt['牛肉'] = '和牛 アメリカ牛';
opt['鳥肉'] = '名古屋コーチン 比内地鶏';
opt['---'] = '---';
window./*@cc_on @if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function(){
setSelectOption( opt['最初'],'item1');
}, false);


function setSelectOption( optionText, elementId ){
var element = getNode( elementId );
var text_array = optionText? ('--- '+optionText).split(' '):'';
while( element.hasChildNodes() ) element.removeChild( element.lastChild );
for(var i=0, mx = text_array.length; i<mx; i++){
var n = new Option( text_array[i], (text_array[i]=='---'? '':text_array[i]) ,i==0,i==0);
element.add( n/*@if(0)@*/, null /*@end@*/);
}
}
function chk(){ checkSubmit( 'sousin', 'item1', 'item2', 'item3') }
function getNode( e ){
return ( typeof(e) == 'string' )? document.getElementById(e) || document.getElementsByName(e)[0]: e;
}

function checkSubmit( btn ){
var i=f=1,o; while( o = arguments[i++]) f&=!!getNode( o ).value;
getNode( btn ).disabled = !f;
}
    • good
    • 0
この回答へのお礼

ご回答頂きありがとうございます。
お教え頂いた通りにしてみたところ、無事外部jsで動作致しました。
本当にありがとうございました!

お礼日時:2008/12/24 01:04

回答ではありませんが、別方式。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<form method="post" action="xxx.cgi">
<p>
1<select name="item1" onChange="setSelectOption( opt[this.value], 'item2');chk()"></select>
2<select name="item2" onChange="setSelectOption( opt[this.value], 'item3');chk()"></select>
3<select name="item3" onChange="chk()"></select>
<input type="submit" value="送信" id="sousin" disabled>
</p>
</form>

<script type="text/javascript">
//@cc_on
var opt = [];
opt['最初'] = '果物 肉';
opt['果物'] = '梨 りんご';
opt['梨'] = '20世紀梨 ラフランス';
opt['りんご'] = 'ふじ つがる';
opt['肉'] = '牛肉 鶏肉';
opt['牛肉'] = '和牛 アメリカ牛';
opt['鳥肉'] = '名古屋コーチン 比内地鶏';
opt['---'] = '---';
setSelectOption( opt['最初'],'item1');

function setSelectOption( optionText, elementId ){
var element = getNode( elementId );
var text_array = optionText? ('--- '+optionText).split(' '):'';
while( element.hasChildNodes() ) element.removeChild( element.lastChild );
for(var i=0, mx = text_array.length; i<mx; i++){
var n = new Option( text_array[i], (text_array[i]=='---'? '':text_array[i]) ,i==0,i==0);
element.add( n/*@if(1) @else @*/, null /*@end@*/);
}
}
function chk(){ checkSubmit( 'sousin', 'item1', 'item2', 'item3') }
function getNode( e ){
return ( typeof(e) == 'string' )? document.getElementById(e) || document.getElementsByName(e)[0]: e;
}

function checkSubmit( btn ){
for( var i=1, f=1, v, m=arguments.length; i<m; i++ ){
v =getNode( arguments[i] ).value;
f = (f & !!v);
if(!v) d=1;
}
getNode( btn ).disabled = !f;
}
</script>

この回答への補足

ご回答頂きありがとうございます。
サンプルソースまで作成して頂き、感謝しております。

このソースで試させて頂いたところ、無事送信することができました。
ちなみにjavascriptの部分を外部jsにしたいと思い、<script type="text/javascript">から</script>までを外部jsとしたのですが、そうするとjavascriptが効いていないようです。
外部jsにする際の記述方法が間違っているのでしょうか?

もしよろしければお教え頂けると幸いです。
よろしくお願い致します。

補足日時:2008/12/23 00:49
    • good
    • 0

最終形がみえないのですが、とりあえずnameを適当につければ


データとして送られませんか?

この回答への補足

早速ご回答頂きありがとうございます。
上記のソースのままでnameを付けて、例えば「肉・鶏肉・比内地鶏」とプルダウンを選択して送信してもcgiには「肉」とだけしか表示されず、「肉」以降の「鶏肉」と「比内地鶏」のデータが送信されていないようなのです。

上記のようにプルダウンが選択肢で分かれていくjavascriptを使用して、cgiにデータを送ることはできないのでしょうか?

補足日時:2008/12/22 22:48
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。


人気Q&Aランキング