現在、リストボックスから数字を選択してます。
この数字は数字毎に内容が決まっていて、知っている人は何も見ないで
数字を選択出来ますが、知らない人は数字に紐づいた内容を
別途紙で確認しながら、選択しなければなりません。
これが面倒なので、リストボックスの矢印をクリックしたら、内容の説明が
開いて、選択すると対応している数字が表示されるようにするには、
どうしたら、出来るのでしょうか?
リストボックスの幅は数字1桁分の幅しか可能ではありません。
JavaScriptでは出来ないんですかねぇ・・・
もしそうなら何でどうすれば出来るようになるんでしょうか。
ご教示宜しくお願い致します。
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()以外の処理を複数の関数にいれて呼び出します。
対応する数字フォームを非表示にする処理は含まれておりません。
No.2
- 回答日時:
修正と補足:
dataは複数あってもかまいません。
select 又は if else で振り分けてください。
var data1 = new Array("------", "100"."200");
var data2 = new Array("------", "100"."200");
この回答への補足
あまり詳しくないので、実際これをどのように組み込んで行き、動かすところまで
たどり着くのか解りません。
結構、複雑なんですね。動作確認してみたいのですが、そこまでは
ご教示願えないですか?
宜しくお願い致します。
No.3
- 回答日時:
確認したいのですが、
・最初に選択する数字は[0-9]の範囲の数字をもつリストボックス?
・それぞれ別の説明文をもっている?
・矢印クリックってあるがリストを選択したらではないのか?
・説明文は別のサブウインドウを開く?
・選択するのはリストボックスそれともサブウインドウ?
・最初の数字リスト確定後、表示する数字は別のリストボックスへ表示?
この回答への補足
上から順にお答えいたします。
(1)コンボボックス内には1~9までの数値のうち1がデフォルト表示されていて、矢印をクリックして選択しようとした時に、1~9に割り当てられている説明内容が表示されて欲しいのです。
(2)例えば1が欠勤、2が有給休暇とかです。
(3)コンボボックスのことです。
(4)そうですね。説明内容を選択出来て、コンボの表示枠にはそれに
該当した番号が表示されて欲しいのです。
(5)矢印をクリックした時にjAVASCRIPTで出来れば最高なんですが、
出来なければ、簡単に出来る方法で表示出来ればよいです。
(6)いいえ、コンボなので、矢印をクリック後に説明を選択し該当する
番号を矢印横のエリアに表示したいです。
以上、この説明で可能でしょうか。
宜しくお願い致します。
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>
この回答への補足
こんなに親切に作って頂いたのに申し訳ございませんが、ちょっと伝え方が悪かったのかもしれません。
作って頂いたコンボの矢印をクリックすると今は数字がビロ~ンって
選べるように表示されますよね?それを欠勤とか有給休暇とか説明内容
の方で選びたいのです。
で、その説明内容から該当するものを選ぶと、その説明に紐ついている
数値が矢印の横に現在のように表示されて欲しいのです。
こんなこと出来ないのでかなぁ。
と言うのは、コードに紐付いている説明を知っている人が入力するので
あればいいのですが、知らない人はいちいち説明が載っている紙を
見て選択しなければならないので、不親切に思ったのです。
もしJavaScriptで出来なければ、他の作り方でも良いのですが
知っていたら教えてください。
宜しくお願い致します。
No.5ベストアンサー
- 回答日時:
やっぱり~。
”リストボックスの幅は数字1桁分の幅しか可能ではありません”とあったので、変だなと感じていたんです。
まずは親数字のリストボックス
new Option(Optionの表示される文字,OptionのValue)なので、
new Option(notes[i],cate[i]);
選択されてる親数字
notes[fm.box.value-1];をcate[fm.box.value-1];に。
下記の様にソースを貼り付ける事は、本当は親切ではありませんよ~。
今回のソースは一例という意味で捉えてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jsで診断コンテンツのページ内切り替えについて 1 2023/04/14 17:31
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/06/15 14:11
- Excel(エクセル) Excel2019、2021の日付、曜日の表示について 2 2022/11/29 15:01
- Excel(エクセル) Excel 値を返す数式についてです 3 2022/11/21 20:08
- Excel(エクセル) Excelにの以下の設定方法について教えてください! C列にデータ入力の設定をしています。(出、入を 3 2022/06/22 01:33
- くじ・懸賞 ナンバーズ4とか毎日ストレートが30本前後当選していますが、本当に買って当選してると思います? スト 2 2023/04/04 08:37
- Excel(エクセル) 範囲選択すると最後の一行で急に出てくる#が邪魔で困っています。 ExcelでVLOOKUPで引っ張っ 2 2022/08/31 10:03
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
- JavaScript HTML,JS初心者です。 2つのselectボックスが有り その選択の組み合わせにより 指定した文 3 2022/03/31 23:35
- USBメモリー・SDカード・フラッシュメモリー メディアプレーヤーの字幕データ読み込みについて。 3 2023/08/16 13:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
CSVファイルを読みこみ、プルダ...
-
jQuery セレクトボックスで選択...
-
html selectの内容を初期値に戻す
-
jspに組込んだJavaScript でjava文
-
Selectの中身をfor文で入れる
-
プルダウンで現在の年月日を取...
-
セレクトメニューの連動 multip...
-
セレクトの値を取得できない
-
selectタグに直接onChangeを書...
-
ラジオボタンとドロップダウン...
-
<textarea>にプルダウンを表示...
-
現在時刻を取得してフォームのs...
-
セレクトボックスで現在選択さ...
-
セレクトを全て選択されていな...
-
JQuery selectが反映されない
-
HTMLコンボボックスへの項目追加
-
return trueとreturn falseの用...
-
submitボタン押下時にPOSTされ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
ブラウザの戻るボタンを押した...
-
JQuery selectが反映されない
-
jQuery セレクトボックスで選択...
-
セレクトの値を取得できない
-
テーブルにおける行(セルにプル...
-
現在時刻を取得してフォームのs...
-
javascriptでの2つのプルダウン...
-
document.form で nullまたは...
-
リストボックスの項目の順番を...
-
onFocusOutが複数回呼ばれる!
-
javascriptでselectボックスの<...
-
プログラムがうまく動きません...
-
親子連動型のselectを設置し、...
-
selectタグに直接onChangeを書...
おすすめ情報