- 締切済み
リストボックスの操作について
現在、リストボックスから数字を選択してます。 この数字は数字毎に内容が決まっていて、知っている人は何も見ないで 数字を選択出来ますが、知らない人は数字に紐づいた内容を 別途紙で確認しながら、選択しなければなりません。 これが面倒なので、リストボックスの矢印をクリックしたら、内容の説明が 開いて、選択すると対応している数字が表示されるようにするには、 どうしたら、出来るのでしょうか？ リストボックスの幅は数字１桁分の幅しか可能ではありません。 JavaScriptでは出来ないんですかねぇ・・・ もしそうなら何でどうすれば出来るようになるんでしょうか。 ご教示宜しくお願い致します。
- minekichi
- お礼率20% (15/75)
- JavaScript
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
みんなの回答
やっぱり～。 ”リストボックスの幅は数字１桁分の幅しか可能ではありません”とあったので、変だなと感じていたんです。 まずは親数字のリストボックス new Option(Optionの表示される文字,OptionのValue)なので、 new Option(notes[i],cate[i]); 選択されてる親数字 notes[fm.box.value-1];をcate[fm.box.value-1];に。 下記の様にソースを貼り付ける事は、本当は親切ではありませんよ～。 今回のソースは一例という意味で捉えてください。
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>
確認したいのですが、 ・最初に選択する数字は[0-9]の範囲の数字をもつリストボックス？ ・それぞれ別の説明文をもっている？ ・矢印クリックってあるがリストを選択したらではないのか？ ・説明文は別のサブウインドウを開く？ ・選択するのはリストボックスそれともサブウインドウ？ ・最初の数字リスト確定後、表示する数字は別のリストボックスへ表示？
補足
上から順にお答えいたします。 （１）コンボボックス内には１～９までの数値のうち１がデフォルト表示されていて、矢印をクリックして選択しようとした時に、１～９に割り当てられている説明内容が表示されて欲しいのです。 （２）例えば１が欠勤、２が有給休暇とかです。 （３）コンボボックスのことです。 （４）そうですね。説明内容を選択出来て、コンボの表示枠にはそれに 該当した番号が表示されて欲しいのです。 （５）矢印をクリックした時にjAVASCRIPTで出来れば最高なんですが、 出来なければ、簡単に出来る方法で表示出来ればよいです。 （６）いいえ、コンボなので、矢印をクリック後に説明を選択し該当する 番号を矢印横のエリアに表示したいです。 以上、この説明で可能でしょうか。 宜しくお願い致します。
修正と補足： dataは複数あってもかまいません。 select 又は if else で振り分けてください。 var data1 = new Array("------", "100"."200"); var data2 = new Array("------", "100"."200");
補足
あまり詳しくないので、実際これをどのように組み込んで行き、動かすところまで たどり着くのか解りません。 結構、複雑なんですね。動作確認してみたいのですが、そこまでは ご教示願えないですか？ 宜しくお願い致します。
自分でもやってみましたが、あまりにも込み入った処理なのでここに記述は難しいのでポイントだけ。 一つ一つ確かめながらやってください。 まず、初期数字、内容、対応する数字を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()以外の処理を複数の関数にいれて呼び出します。 対応する数字フォームを非表示にする処理は含まれておりません。
補足
こんなに親切に作って頂いたのに申し訳ございませんが、ちょっと伝え方が悪かったのかもしれません。 作って頂いたコンボの矢印をクリックすると今は数字がビロ～ンって 選べるように表示されますよね？それを欠勤とか有給休暇とか説明内容 の方で選びたいのです。 で、その説明内容から該当するものを選ぶと、その説明に紐ついている 数値が矢印の横に現在のように表示されて欲しいのです。 こんなこと出来ないのでかなぁ。 と言うのは、コードに紐付いている説明を知っている人が入力するので あればいいのですが、知らない人はいちいち説明が載っている紙を 見て選択しなければならないので、不親切に思ったのです。 もしJavaScriptで出来なければ、他の作り方でも良いのですが 知っていたら教えてください。 宜しくお願い致します。