javascriptで選択肢が分かれるプルダウンでcgiにデータを送るには？

解決済

質問者：patsaysnow
質問日時：2008/12/22 20:53
回答数：3件

下記のように、javascriptで選択肢が変化するプルダウンを使用してcgiにデータを送りたいのですが、この方法ですと一番最初の選択肢である「果物・肉」の部分のデータしかcgiに送れません。

例えば「果物・梨・20世紀梨」や「肉・鶏肉・比内地鶏」というように、選択したすべてのデータをcgiに送れるようにするにはどうすればよいのでしょうか？

分かりづらい説明で申し訳ありません。
補足説明致しますので、どうかご教授下さいますようお願い致します。

以下がサンプルソースです。

<html>
<head>
<script type="text/javascript">

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： _pipi_
回答日時：2008/12/23 08:07

//@cc_on

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

No.2

回答者： _pipi_
回答日時：2008/12/22 22:50

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

<!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['梨'] = '２０世紀梨ラフランス';
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

通報する

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2008/12/22 22:21

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

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

この回答への補足

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

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

補足日時：2008/12/22 22:48

通報する