WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:続:perlでプルダウンメニューを連動させる。

0:[投稿] JAVAで不眠 [2008/11/19 11:21 ] [環境:XP ?]

何度もすみません。
先日からの続きなんですが・・・
プルダウンの連動は教えて頂き動作したのですが、少し変更点がある為、再度お尋ね致します。

http://chaichan.lolipop.jp/qanda/qa7312.htm?08-11-18-18-20

上記が教えて頂いたプログラムですが、変更点が。。。
(分りやすいように例題を変えてます)

1つ目のリストが

<OPTION value=果物>果物</OPTION>
<OPTION value=野菜>野菜</OPTION>
<OPTION value=お菓子>お菓子</OPTION>

2つ目のリストが

var r_Array = {
'果物' : '甘い系,辛い系,すっぱい系,苦い系'、
'野菜' : '甘い系,辛い系,苦い系'、
'お菓子' : '甘い系,辛い系,すっぱい系,'

とかなってる場合、
3つ目のBOXを

var r_Array = {
'甘い系' : 'りんご,いちご,みかん,ぶどう,メロン',
'辛い系' : 'とうがらし・・---------',
'すっぱい系' : 'レモン・・-----------'

とかにした場合
2つ目で「甘い系」を選択すると、3つ目の選択は「甘い系」はリストが1つしかありません。
'甘い系' : 'りんご,いちご,みかん,ぶどう,メロン',
実際は
「果物」→「甘い系」→りんご,いちご,みかん,ぶどう,メロン'
「野菜」→「甘い系」→甘たまねぎ、甘きゅうり、甘キャベツ
「お菓子」→「甘い系」→チョコ、アイス、・・・

と同じ「甘い系」でもその前のBOXの選択肢により変えたいのですが・・・

何度もすみませんが
宜しくお願いします。


1:[回答] jam [2008/11/19 16:11 ]

データの持ち方を考えればできると思います。
以下一例(なんとなく動いてるっぽい程度なのであまり参考には・・・)
--
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=shift-jis">
<script type="text/javascript">
//json format
var list_data = {
   '果物'   : {
               '甘い系'     : ['りんご','ごりら'],
               '辛い系'     : [],
               'すっぱい系' : ['レモン','アセロラ']
              },
   '野菜'   : {
               '甘い系'     : ['たまねぎ','キャベツ'],
               '辛い系'     : ['ししとう'],
               'すっぱい系' : []
              },
   'お菓子'   : {
               '甘い系'     : ['あめ','あいす'],
               '辛い系'     : ['からむーちょ'],
               'すっぱい系' : ['すっぱむーちょ']
                }
};

function set_list_1(){
   var sel = document.getElementById('sel1');
   sel.style.display = "none";//なんだかIEで表示が崩れたからなんとなく回避用?
   while (sel.hasChildNodes()) {
       sel.removeChild(sel.firstChild);
   }
   for(obj in list_data){
       var opt = document.createElement('OPTION');
       opt.setAttribute('value', '' + obj);
       var tn = document.createTextNode(obj);
       opt.appendChild(tn);
       sel.appendChild(opt);
   }
   sel.style.display = "inline";//なんだかIEで表示が崩れたからなんとなく回避用?
   set_list_2();
}

function set_list_2(){
   var sel = document.getElementById('sel2');
   sel.style.display = "none";//なんだかIEで表示が崩れたからなんとなく回避用?
   while (sel.hasChildNodes()) {
       sel.removeChild(sel.firstChild);
   }
   var list1val = document.f1.tabemono.options[document.f1.tabemono.selectedIndex].value;
   for(obj in list_data[list1val]){
       var opt = document.createElement('OPTION');
       opt.setAttribute('value', '' + obj);
       var tn = document.createTextNode(obj);
       opt.appendChild(tn);
       sel.appendChild(opt);
   }
   sel.style.display = "inline";//なんだかIEで表示が崩れたからなんとなく回避用?
   set_list_3();
}

function set_list_3(){
   var sel = document.getElementById('sel3');
   sel.style.display = "none";//なんだかIEで表示が崩れたからなんとなく回避用?
   while (sel.hasChildNodes()) {
       sel.removeChild(sel.firstChild);
   }
   var list1val = document.f1.tabemono.options[document.f1.tabemono.selectedIndex].value;
   var list2val = document.f1.syurui.options[document.f1.syurui.selectedIndex].value;
   for (var i = 0; i < list_data[list1val][list2val].length; i++) {
       var opt = document.createElement('OPTION');
       opt.setAttribute('value', '' + list_data[list1val][list2val][i]);
       var tn = document.createTextNode(list_data[list1val][list2val][i]);
       opt.appendChild(tn);
       sel.appendChild(opt);
   }
   sel.style.display = "inline";//なんだかIEで表示が崩れたからなんとなく回避用?
}

</script>
</head>
<body onload="set_list_1()">
<form name="f1">
食べ物リスト(メニュー1)
<select id="sel1" name="tabemono" onchange="set_list_2()">
</select>
種類(メニュー2)
<select id="sel2" name="syurui" onchange="set_list_3()">
</select>
種類(メニュー3)
<select id="sel3" name="other">
</select>
</form>
</body>
</html>
--
javascriptはここの管理人さんのページでも勉強できますよ。
http://chaichan.lolipop.jp/src/2ndthema.htm
あとはprototype.js、jQueryのソース、JSANに転がってるjsのソースみたりしたら勉強になるんじゃないでしょうか。


2:[完了] JAVA今日は熟睡(^^) [2008/11/19 17:45 ]

jamさん 有難う御座います。
期待通りに動作しました。
完璧です!!

紹介頂いたサイトも見て勉強したいと思います。
(専門ではないので、ひとつつまずくと2〜3日。。
牛歩戦術?意味無く実行中!!)

度々有難う御座いました。
またなにかありましたら宜しくお願い致します。
m(_ _)m


3:[完了] JAVA(;;) [2008/11/19 18:09 ]

度々すみません!!

えっと、一応期待通り動作するのですが。。
例えばBOX1,2,3で登録(データ書き込み)して、
次に変更で読み出したときに、内容が常にリストの1番目に変わってしまうのですが・・・

たぶん
<body onload="set_list_1()">
のせいだと思うのですが・・・

どこかを変更すれば大丈夫でしょうか??
すみません お願いします。


4:[質問] JAVA(;;) [2008/11/19 18:10 ]

度々すみません!!

えっと、一応期待通り動作するのですが。。
例えばBOX1,2,3で登録(データ書き込み)して、
次に変更で読み出したときに、内容が常にリストの1番目に変わってしまうのですが・・・

たぶん
<body onload="set_list_1()">
のせいだと思うのですが・・・

どこかを変更すれば大丈夫でしょうか??
すみません お願いします。



5:[回答] jam [2008/11/20 10:20 ]

登録ってのはサーバ側の話ですか?

サーバからの処理結果として画面を出力してるならそこに
どのデータが選ばれてるかjavascriptの値として出力しておいてあげればいいんじゃ??

それかcookieにデータいれといてやるとか?


6:[質問] JAVA(><) [2008/11/20 14:36 ]

えっと。。。
やっているのはサーバーで動作しているCGIです。
BOXで選択した値をそのままサーバーへ書き込みして、再度、読み出していずれかの項目を変更したりするプログラムです。

食べ物リスト(メニュー1)
<select id="sel1" name="tabemono" onchange="set_list_2()">
<OPTION selected>$tabemono</OPTION>\n";
</select>

って感じです。(Perlです)
が、初期値(読み込んだデータ値)を$tabemonoにセットしていたのですが。。。今でもその他の項目はきちんと表示されるのですが、BOXの値だけは常に最初の選択肢しか出ません。しかし表示だけの問題みたいでデータそのものは元のままです。(そのまま「変更処理(再書き込み)」をしなければ・・)具体的な方法を教えて頂ければ幸いですが。。ちなみにデータは50件くらいです。


7:[回答] jam [2008/11/20 16:05 ]

サーバ側からリスト内のオプションの値を出力してるなら
onload="set_list_1()"はしちゃダメね。(これしたらリストが全て初期化されちゃうし・・・)

サーバ側での出力は
print <<"EOHTML";

〜略〜

<select id="sel1" name="tabemono" onchange="set_list_2()">
<option>果物</option>
<option selected>野菜</option>
<option>お菓子</option>
</select>

〜略〜

EOHTML
みたくしてjavascript側ではset_list_2()set_list_3()だけ動けばいいんじゃないのかな?


8:[完了] JAVAっていいんじゃ・・・ [2008/11/22 10:10 ]

jamさん回答有難う御座います。
本業で忙しく今、確認、実行致しました。

onload="set_list_1()
を取りました。

完璧です!!
期待通りの動作です。
御世話になりました。

先日紹介して頂いたサイトでJAVAも勉強をはじめてみました。
以前お伝え致しました通り、専業ではありませんので、一語一句が調べる事から始まり、ほとんど先へはすすみません。。。が!!少しずつでもやって行きたいと思います。

今回は本当に有難う御座いました。
m(_ _)m

回答(必須): 状態:

お名前(必須):

URL:




[戻る]