締切済み

リストボックスの操作について

2002/03/19 15:06

現在、リストボックスから数字を選択してます。この数字は数字毎に内容が決まっていて、知っている人は何も見ないで数字を選択出来ますが、知らない人は数字に紐づいた内容を別途紙で確認しながら、選択しなければなりません。これが面倒なので、リストボックスの矢印をクリックしたら、内容の説明が開いて、選択すると対応している数字が表示されるようにするには、どうしたら、出来るのでしょうか？リストボックスの幅は数字１桁分の幅しか可能ではありません。 JavaScriptでは出来ないんですかねぇ・・・もしそうなら何でどうすれば出来るようになるんでしょうか。ご教示宜しくお願い致します。

minekichi
お礼率20% (15/75)

JavaScript
回答数5
ありがとう数0

回答全件

やっぱり～。 ”リストボックスの幅は数字１桁分の幅しか可能ではありま…

noname#1505
2002/03/27 05:07

IE限定。他の方法はDBを使ったりXMLDOMやサーバーサイドで行…

noname#1505
2002/03/24 18:49

確認したいのですが、・最初に選択する数字は[0-9]の範囲の数字を…

noname#1505
2002/03/21 00:16

修正と補足： dataは複数あってもかまいません。 select …

noname#1505
2002/03/19 18:46

自分でもやってみましたが、あまりにも込み入った処理なのでここに記述は難…

noname#1505
2002/03/19 18:38

みんなの回答 （5）
専門家の回答

みんなの回答

noname#1505

2002/03/27 05:07 回答No.5

やっぱり～。 ”リストボックスの幅は数字１桁分の幅しか可能ではありません”とあったので、変だなと感じていたんです。まずは親数字のリストボックス new Option(Optionの表示される文字,OptionのValue)なので、 new Option(notes[i],cate[i]); 選択されてる親数字 notes[fm.box.value-1];をcate[fm.box.value-1];に。下記の様にソースを貼り付ける事は、本当は親切ではありませんよ～。今回のソースは一例という意味で捉えてください。

全文を見る

ログインすると、全ての回答が全文表示されます。

noname#1505

2002/03/24 18:49 回答No.4

IE限定。他の方法はDBを使ったりXMLDOMやサーバーサイドで行うことで可能でしょう。 <html><head><script language="JavaScript"> var cate=new Array(1,2,3,4,5,6,7,8,9); var notes=new Array( "欠勤","有給休暇","・・・","・・・","・・・","・・・","・・・","・・・","最後"); var data10=new Array(10,20,30,40,50,60,70,80,90); var data100=new Array(100,200,300,400,500,600,700,800,900); function init(){ for(var i=0;i<cate.length;i++){ fm.box.options[i]=new Option(cate[i],cate[i]); } showdata(); fm.box.options[0].selected=true; fm.box.focus(); document.fm.data.visibility="visible"; } function showdata(val) { document.all.note.innerText = notes[ fm.box.value-1 ]; if(fm.box.value==1){ for(var i=0;i<data10.length;i++){ fm.data.options[i] = new Option(data10[i], data10[i]); } }else{ for(var i=0;i<data100.length;i++){ fm.data.options[i] = new Option(data100[i], data100[i]); } } } </script></head> <body onLoad = "init()" style="font-size:9pt;"> <form method = "post" name="fm"> <table border="1"> <tr><th>親数字</th><td> <select name="box" onChange="showdata(this.value)"></select> </td><td> <div id="note" style="width:150px; height:10px;font-size:9pt;background-color:#000000;color:#ffffff;"></div> </td></tr> <tr><th>子数字</th><td colspan="2"> <select name="data"></select> </td></tr><tr><td colspan="3"> <input type="button" value="Check"onClick="alert(fm.box.value+'\n'+fm.data.value)"> </td></tr></table></form></body> </html>

質問者

補足 2002/03/25 01:09

こんなに親切に作って頂いたのに申し訳ございませんが、ちょっと伝え方が悪かったのかもしれません。作って頂いたコンボの矢印をクリックすると今は数字がビロ～ンって選べるように表示されますよね？それを欠勤とか有給休暇とか説明内容の方で選びたいのです。で、その説明内容から該当するものを選ぶと、その説明に紐ついている数値が矢印の横に現在のように表示されて欲しいのです。こんなこと出来ないのでかなぁ。と言うのは、コードに紐付いている説明を知っている人が入力するのであればいいのですが、知らない人はいちいち説明が載っている紙を見て選択しなければならないので、不親切に思ったのです。もしJavaScriptで出来なければ、他の作り方でも良いのですが知っていたら教えてください。宜しくお願い致します。

全文を見る

ログインすると、全ての回答が全文表示されます。

noname#1505

2002/03/21 00:16 回答No.3

確認したいのですが、・最初に選択する数字は[0-9]の範囲の数字をもつリストボックス？・それぞれ別の説明文をもっている？・矢印クリックってあるがリストを選択したらではないのか？・説明文は別のサブウインドウを開く？・選択するのはリストボックスそれともサブウインドウ？・最初の数字リスト確定後、表示する数字は別のリストボックスへ表示？

質問者

補足 2002/03/23 23:04

上から順にお答えいたします。（１）コンボボックス内には１～９までの数値のうち１がデフォルト表示されていて、矢印をクリックして選択しようとした時に、１～９に割り当てられている説明内容が表示されて欲しいのです。（２）例えば１が欠勤、２が有給休暇とかです。（３）コンボボックスのことです。（４）そうですね。説明内容を選択出来て、コンボの表示枠にはそれに該当した番号が表示されて欲しいのです。（５）矢印をクリックした時にjAVASCRIPTで出来れば最高なんですが、出来なければ、簡単に出来る方法で表示出来ればよいです。（６）いいえ、コンボなので、矢印をクリック後に説明を選択し該当する番号を矢印横のエリアに表示したいです。以上、この説明で可能でしょうか。宜しくお願い致します。

全文を見る

ログインすると、全ての回答が全文表示されます。

noname#1505

2002/03/19 18:46 回答No.2

修正と補足： dataは複数あってもかまいません。 select 又は if else で振り分けてください。 var data1 = new Array("------", "100"."200"); var data2 = new Array("------", "100"."200");

質問者

補足 2002/03/20 13:41

あまり詳しくないので、実際これをどのように組み込んで行き、動かすところまでたどり着くのか解りません。結構、複雑なんですね。動作確認してみたいのですが、そこまではご教示願えないですか？宜しくお願い致します。

全文を見る

ログインすると、全ての回答が全文表示されます。

noname#1505

2002/03/19 18:38 回答No.1

自分でもやってみましたが、あまりにも込み入った処理なのでここに記述は難しいのでポイントだけ。一つ一つ確かめながらやってください。まず、初期数字、内容、対応する数字をfunctionの外でarray又はobjectに格納します。配列の要素0はデフォルト値を設定しておくとよいです。 var cate = new Array("内容の選択", "内容1", "内容2"); var num = new Array( 0,1,2); var data = new Array( 100,200,300); onLoad時に初期数字と内容をOptionに追加します。ついでに対応する数字フォームの初期値を設定。例） fm.box.options[i]=new Option(cate[i],num[i]); fm.data.options[0]=new Option(data[0],data[0]); * <form name="fm"> <select name="box"></select> <select name="data"></select> onChangeでdivエリアに内容を表示させる例） document.all("note").innerText = notes[i]; * <div id="note"> 前回のonChange又はbuttonのonClickでfm.box.valueに対応する数字をOptionに追加 select又はif else fm.data.options[i]= new Option(data[i], data[i]); new Array()以外の処理を複数の関数にいれて呼び出します。対応する数字フォームを非表示にする処理は含まれておりません。

全文を見る

ログインすると、全ての回答が全文表示されます。

リストボックスの操作について