下記のように、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>
No.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;
}
ご回答頂きありがとうございます。
お教え頂いた通りにしてみたところ、無事外部jsで動作致しました。
本当にありがとうございました!
No.2
- 回答日時:
回答ではありませんが、別方式。
<!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にする際の記述方法が間違っているのでしょうか?
もしよろしければお教え頂けると幸いです。
よろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
全てのselect要素をデフォルト...
-
検索窓とプルダウンメニュー機...
-
ラジオボタンとプルダウンを連...
-
selectのすべての値を送信する方法
-
selectボックスで選択数を制限...
-
リストボックス内の重複したも...
-
セレクトボックスを未選択の状...
-
プルダウンのoptionの表示・非...
-
3つの連動したプルダウンメニュ...
-
addclassがうまく働きません
-
プルダウンの値をphpファイルへ...
-
プルダウンの値によって活性・...
-
複数プルダウンで検索
-
セレクトボックスで配列を呼び...
-
2段階プルダウンで1段階目の選...
-
javascriptで合計金額を算出し...
-
まったく同じ<select>フォーム...
-
JavaScriptで<select>の<option...
-
スマホのフォームでのselect複...
-
javascriptでセレクトボックス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
全てのselect要素をデフォルト...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
JavaScriptで<select>の<option...
-
プルダウン選択を変更すると、...
-
select要素のvalueを配列で取得...
-
selectを変更不可にしたい
-
<input>の選択肢をプルダウンメ...
-
ラジオボタンとプルダウンを連...
-
【JS】selectでchangeした時の...
-
VBScriptでHTMLのセレクトボッ...
-
リストボックス内の重複したも...
-
同じ名前のセレクトがある場合...
-
プルダウンの値によって活性・...
-
selectが変更されたらnameを指...
-
【javascript】連想配列からセ...
-
3つのselectでURLパラメータを...
-
複数のプルダウンを1つにまとめ...
-
selectボックスで選択数を制限...
-
セレクトボックスで配列を呼び...
おすすめ情報