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

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

ご教示宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

やっぱり~。


”リストボックスの幅は数字1桁分の幅しか可能ではありません”とあったので、変だなと感じていたんです。

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

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

下記の様にソースを貼り付ける事は、本当は親切ではありませんよ~。
今回のソースは一例という意味で捉えてください。
    • good
    • 0

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で出来なければ、他の作り方でも良いのですが
知っていたら教えてください。
宜しくお願い致します。

補足日時:2002/03/25 01:09
    • good
    • 0

確認したいのですが、


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

この回答への補足

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

以上、この説明で可能でしょうか。
宜しくお願い致します。

補足日時:2002/03/23 23:04
    • good
    • 0

修正と補足:


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

この回答への補足

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

宜しくお願い致します。

補足日時:2002/03/20 13:41
    • good
    • 0

自分でもやってみましたが、あまりにも込み入った処理なのでここに記述は難しいのでポイントだけ。


一つ一つ確かめながらやってください。

まず、初期数字、内容、対応する数字を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()以外の処理を複数の関数にいれて呼び出します。

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

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qセレクトボックスで選択した内容をテキストボックスへ

こんにちは、初めて質問させて頂きます。
現在、下記のような形式で、選んだテキストをテキストボックスに追加する仕様を使っています。
これをテキストではなく、プルダウン形式のセレクトボックスで選択できるようにはできないでしょうか?

<A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='鉄 '">鉄</A><BR>
<A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='アルミ '">アルミ</A><BR>
<A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='塩ビ '">塩ビ</A><BR>

<FORM name="myform">
<INPUT TYPE="TEXT" NAME="comment" SIZE="50">
</form>


お手数ですが、もし宜しければお知恵をお貸し下さい。

こんにちは、初めて質問させて頂きます。
現在、下記のような形式で、選んだテキストをテキストボックスに追加する仕様を使っています。
これをテキストではなく、プルダウン形式のセレクトボックスで選択できるようにはできないでしょうか?

<A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='鉄 '">鉄</A><BR>
<A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='アルミ '">アルミ</A><BR>
<A HREF="javascript:function voi(){};vo...続きを読む

Aベストアンサー

連続入力することもかんがえるとこうするとよいかも

<script>
function hoge(obj){
var f=obj.form;
var v=obj.options[obj.selectedIndex].value;
var c=f.elements["comment"];
c.value+=v;
obj.selectedIndex=0;
}
</script>
<form>
<p>
<select onchange="hoge(this)">
<option value="" >選択してね</option>
<option value="鉄">鉄</option>
<option value="アルミ">アルミ</option>
<option value="塩ビ">塩ビ</option>
</select>
<input type="text" name="comment" value="">
</p>
</form>

Qリストボックスの内容追加と削除

質問QNo.172288を参考にプログラムを作成しました。
そこで下記のような処理をしたいのですがどのように処理をしていいのか解りません。
Bというリストボックスの値を「追加」ボタンを押すとAのリストボックスに追加するときにBのリストボックスより選択した値は削除(非表示)あるいはAのリストボックスに既に存在する同じ値はAリストボックスには追加しない。(重複チェックみたいな感じです)
それと、Aというリストボックスの値を「戻す」ボタンを押すと選択されている値をAのリストボックスより削除し、Bのリストボックスに表示させる
JavaScriotでは難しいいですか。ご教授いただけないでしょうか
宜しくお願いします

<form name=frm method=post action=/beta/index.php>
<td align=right>
<select name=A size=8 multiple>
<option value=""></option>
</select>
</td>
<td align=center>
<input type=button value="← 追加" onClick="addItem();">
<p>
<input type=button value="戻す →" onClick="delItem();">
<td align=left>
<select name=B size=8 multiple>
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCC</option>
</select>
</td>
function addItem() {
A = document.frm.A;
B = document.frm.B;
for (var i=0; i<B.options.length; i++) {
if (B.options[i].selected) {
A[A.options.length] = new Option(B.options[i].text,B.options[i].value);
}
}
}
function delItem() {
B = document.frm.A;
A = document.frm.B;
for (var i=0; i<B.options.length; i++) {
if (B.options[i].selected) {
A[A.options.length] = new Option(B.options[i].text,B.options[i].value);
}
}
}

質問QNo.172288を参考にプログラムを作成しました。
そこで下記のような処理をしたいのですがどのように処理をしていいのか解りません。
Bというリストボックスの値を「追加」ボタンを押すとAのリストボックスに追加するときにBのリストボックスより選択した値は削除(非表示)あるいはAのリストボックスに既に存在する同じ値はAリストボックスには追加しない。(重複チェックみたいな感じです)
それと、Aというリストボックスの値を「戻す」ボタンを押すと選択されている値をAのリストボックスより削除し、B...続きを読む

Aベストアンサー

もっと効率的なかきかたもあるとは思いますが、元ソースをいかすと
こんな感じでしょうか?

<style type="text/css">
.floatdiv{
float:left;
}
.select0{
width:200px;
}
</style>
<script language="javascript">
function addItem(f) {
var A = f.A;
var B = f.B;
var C=new Array();
for (var i=0; i<B.options.length; i++) {
if (B.options[i].selected) {
A[A.options.length] = new Option(B.options[i].text,B.options[i].value);
C[C.length] = i;
}
}
for (var i=C.length -1; i>=0; i--) {
B.options[C[i]] = null;
}
}
function delItem(f) {
var B = f.A;
var A = f.B;
var C=new Array();
for (var i=0; i<B.options.length; i++) {
if (B.options[i].selected) {
A[A.options.length] = new Option(B.options[i].text,B.options[i].value);
C[C.length] = i;
}
}
for (var i=C.length -1; i>=0; i--) {
B.options[C[i]]=null;
}
}
</script>
<form name=frm method=post action=/beta/index.php>
<div class="floatdiv">
<select name=A size=8 multiple class="select0">
</select>
</div>
<div class="floatdiv">
<div>
<input type=button value="← 追加" onClick="addItem(this.form);">
</div>
<div>
<input type=button value="戻す →" onClick="delItem(this.form);">
</div>
</div>
<div>
<select name=B size=8 multiple class="select0">
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCC</option>
<option>DDDDD</option>
<option>EEEEE</option>
<option>FFFFF</option>
</select>
</div>
</form>

もっと効率的なかきかたもあるとは思いますが、元ソースをいかすと
こんな感じでしょうか?

<style type="text/css">
.floatdiv{
float:left;
}
.select0{
width:200px;
}
</style>
<script language="javascript">
function addItem(f) {
var A = f.A;
var B = f.B;
var C=new Array();
for (var i=0; i<B.options.length; i++) {
if (B.options[i].selected) {
A[A.options.length] = new Option(B.options[i].text,B.options[i].value);
C[C.length] = i;
}
}
for (var i=...続きを読む

QJavaScriptでリストボックスを選択

リストボックスに約100個の項目があり、いくつかの項目を選択した状態で初期表示します。
これら約100個の項目には、同じものがありません。
(name="list_box" size="10" multiple)
20~30行目くらいのものが選択されていると、初期表示では1~10行目が表示されるので、選択されていることが分かりません。
そこで、初期表示で20~30行目を表示したいと考えています。
例えば20行目の項目がvalue="aaaa"で、onload時に20行目が一番上にスクロールされている状態にしたいのですが、どのようにJavaScriptを書けばよいでしょうか?
動的なデータを想定しているので、"aaaa"は必ずしも20行目とは限りません。
どうにか、value="aaaa"がリストボックスの一番上に選択されている状態を作りたいと考えています。

Aベストアンサー

ドロップダウンリストでならやった事があります。
optionsコレクションを扱うのは多分同じだと思います。

function selectOption(val)
{
for(var i=0; i<drp1.length; i++)
{
var opt= drp1.options[i];
if(opt.value == val)
{
opt.selected = true;
return;
}
}
}
※ drp1:ドロップダウンリスト、val:選択したい値

Qリスト(コンボ)ボックスの日本語による項目選択

Htmlのリストボックス(select)で、複数文字の日本語を入力してリストを選択する方法を教えて下さい。
IEデフォルトの動きでは、入力された最後の文字から始まる語が選択されます。
Javascriptのサンプルを提供して頂けるとありがたいです。
例:<option>あか</option><option>かき</option> というリストで「あか」と打って「あか」を選択したいのです。

Aベストアンサー

textboxに入力→リスト選択ですね?

<html>
<head>
<title>リストボックス自動選択</title>
<script type="text/javascript">
<!--
function set(){
var txt=document.hoge.hogetxt.value;
for(var i=0;i<document.hoge.hogebox.options.length;i++){
if(document.hoge.hogebox.options[i].text.indexOf(txt)!=-1&&txt.length>0){
document.hoge.hogebox.selectedIndex=i;
i=10000;
}
}
}
//-->
</script>
</head>
<body>
<form name="hoge">
<input type="text" value="" name="hogetxt" size=4 maxlength=4><input type="button" value="リストボックス自動選択" onclick="set()"><br>
<select name="hogebox">
<option>  </option>
<option>あか</option>
<option>あき</option>
<option>あく</option>
<option>あけ</option>
</select>
</form>
</body>
</html>

インデントが無くなっているので自分で修正したほうがいいかも知れません。

textboxに入力→リスト選択ですね?

<html>
<head>
<title>リストボックス自動選択</title>
<script type="text/javascript">
<!--
function set(){
var txt=document.hoge.hogetxt.value;
for(var i=0;i<document.hoge.hogebox.options.length;i++){
if(document.hoge.hogebox.options[i].text.indexOf(txt)!=-1&&txt.length>0){
document.hoge.hogebox.selectedIndex=i;
i=10000;
}
}
}
//-->
</script>
</head>
<body>
<form name="hoge">
<input type="text" value="" name="hogetxt" si...続きを読む

Qonclickでリストボックスを複数選択できる?

下記のようなリストボックスを対象に、上部の「クリック」をクリックすると「東京」「広島」を選択状態にするというようなことができたでしょうか?

<A HREF="#" onclick="sentaku">クリック</A>
<SELECT NAME="">
<OPTION>東京</OPTION>
<OPTION>大阪</OPTION>
<OPTION>広島</OPTION>
<OPTION>長崎</OPTION>
・・・・・・・・
</SELECT>

#できる・できないだけの断言回答も歓迎。

Aベストアンサー

<SCRIPT LANGUAGE="JavaScript">
function sentaku() {
window.document.form.aaa.options[0].selected = true;
window.document.form.aaa.options[1].selected = false;
window.document.form.aaa.options[2].selected = true;
window.document.form.aaa.options[3].selected = false;
}
</SCRIPT>

<form name="form">
<A HREF="#" onclick="sentaku()">クリック</A>
<SELECT NAME="aaa" size=5 multiple>
<OPTION>東京</OPTION>
<OPTION>大阪</OPTION>
<OPTION>広島</OPTION>
<OPTION>長崎</OPTION>
</SELECT>
</form>


こんな感じですか?

<SCRIPT LANGUAGE="JavaScript">
function sentaku() {
window.document.form.aaa.options[0].selected = true;
window.document.form.aaa.options[1].selected = false;
window.document.form.aaa.options[2].selected = true;
window.document.form.aaa.options[3].selected = false;
}
</SCRIPT>

<form name="form">
<A HREF="#" onclick="sentaku()">クリック</A>
<SELECT NAME="aaa" size=5 multiple>
<OPTION>東京</OPTION>
<OPTION>大阪</OPTION>
<OPTION>広島</OPTION>
<OPTION>長崎...続きを読む


人気Q&Aランキング

おすすめ情報