OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
締切り
済み

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

  • すぐに回答を!
  • 質問No.237889
  • 閲覧数172
  • ありがとう数0
  • 気になる数0
  • 回答数5
  • コメント数0

お礼率 20% (15/75)

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

JavaScriptでは出来ないんですかねぇ・・・
もしそうなら何でどうすれば出来るようになるんでしょうか。

ご教示宜しくお願い致します。
通報する
  • 回答数5
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

回答 (全5件)

  • 回答No.1

自分でもやってみましたが、あまりにも込み入った処理なのでここに記述は難しいのでポイントだけ。 一つ一つ確かめながらやってください。 まず、初期数字、内容、対応する数字をfunctionの外でarray又はobjectに格納します。 配列の要素0はデフォルト値を設定しておくとよいです。 var cate = new Array("内容の選択", "内容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()以外の処理を複数の関数にいれて呼び出します。

対応する数字フォームを非表示にする処理は含まれておりません。
  • 回答No.2

修正と補足: dataは複数あってもかまいません。 select 又は if else で振り分けてください。 var data1 = new Array("------", "100"."200"); var data2 = new Array("------", "100"."200& ...続きを読む
修正と補足:
dataは複数あってもかまいません。
select 又は if else で振り分けてください。
var data1 = new Array("------", "100"."200");
var data2 = new Array("------", "100"."200");
補足コメント
minekichi

お礼率 20% (15/75)

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

宜しくお願い致します。
投稿日時 - 2002-03-20 13:41:29
  • 回答No.3

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

お礼率 20% (15/75)

上から順にお答えいたします。
(1)コンボボックス内には1~9までの数値のうち1がデフォルト表示されていて、矢印をクリックして選択しようとした時に、1~9に割り当てられている説明内容が表示されて欲しいのです。
(2)例えば1が欠勤、2が有給休暇とかです。
(3)コンボボックスのことです。
(4)そうですね。説明内容を選択出来て、コンボの表示枠にはそれに
該当した番号が表示されて欲しいのです。
(5)矢印をクリックした時にjAVASCRIPTで出来れば最高なんですが、
出来なければ、簡単に出来る方法で表示出来ればよいです。
(6)いいえ、コンボなので、矢印をクリック後に説明を選択し該当する
番号を矢印横のエリアに表示したいです。

以上、この説明で可能でしょうか。
宜しくお願い致します。
投稿日時 - 2002-03-23 23:04:41
  • 回答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( "欠勤"," ...続きを読む
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>
補足コメント
minekichi

お礼率 20% (15/75)

こんなに親切に作って頂いたのに申し訳ございませんが、ちょっと伝え方が悪かったのかもしれません。

作って頂いたコンボの矢印をクリックすると今は数字がビロ~ンって
選べるように表示されますよね?それを欠勤とか有給休暇とか説明内容
の方で選びたいのです。
で、その説明内容から該当するものを選ぶと、その説明に紐ついている
数値が矢印の横に現在のように表示されて欲しいのです。

こんなこと出来ないのでかなぁ。
と言うのは、コードに紐付いている説明を知っている人が入力するので
あればいいのですが、知らない人はいちいち説明が載っている紙を
見て選択しなければならないので、不親切に思ったのです。
もしJavaScriptで出来なければ、他の作り方でも良いのですが
知っていたら教えてください。
宜しくお願い致します。
投稿日時 - 2002-03-25 01:09:06
  • 回答No.5

やっぱり~。 ”リストボックスの幅は数字1桁分の幅しか可能ではありません”とあったので、変だなと感じていたんです。 まずは親数字のリストボックス new Option(Optionの表示される文字,OptionのValue)なので、 new Option(notes[i],cate[i]); 選択されてる親数字 notes[fm.box.value-1];をcate[fm.box.va ...続きを読む
やっぱり~。
”リストボックスの幅は数字1桁分の幅しか可能ではありません”とあったので、変だなと感じていたんです。

まずは親数字のリストボックス
new Option(Optionの表示される文字,OptionのValue)なので、
new Option(notes[i],cate[i]);

選択されてる親数字
notes[fm.box.value-1];をcate[fm.box.value-1];に。

下記の様にソースを貼り付ける事は、本当は親切ではありませんよ~。
今回のソースは一例という意味で捉えてください。
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ