![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_02.png?e8efa67)
プログラミング、初心者です。
JavaScriptを使って、二つのプルダウンメニューをコンボ(1つ目に選択したメニューの内容で、2つ目を変化)させて、GO!ボタンを押すと2つ目のメニューで指定したPDFを別ウィンドウで表示させるようにしたいです。具体的には、1つ目のメニューで、Aを指定すると2つ目でA-1,A-2,A-3,,,。1つ目のメニューで、Bを指定すると2つ目でB-1,B-2,B-3,,,。というふうにしたいです。その場合どのように記述すればいいのでしょうか?
また、2つ目のメニューの選択肢がかなり多くなった場合でも、きちんと表示されるでしょうか?
ご回答よろしくお願いしますm(__)M
No.2ベストアンサー
- 回答日時:
#2です。
少しわかってきました。
では、単純に数字(1-53)と記号(A-B,C)の組み合わせでファイル名も
1-A.pdf~53-C.pdf と合成しちゃってかまわないんですね?
サンプルです。
<html>
<head>
<title></title>
<script type="text/javascript">
function sample_select(){
var L1 = document.getElementById('UNIT');
var L2 = document.getElementById('QID');
if(! L1.selectedIndex) return;
var W0 = L1.options[L1.selectedIndex].value.split(',');
while(L2.options[1])L2.remove(1);
for(var i=0;i<W0[1];i++){
var OPTION = document.createElement('option');
OPTION.value = W0[0]+'-'+'ABC'.substring(i,i+1)+'.pdf';
OPTION.appendChild(document.createTextNode('ABC'.substring(i,i+1)));
L2.appendChild(OPTION);
}
}
function sample_go(){
var L1 = document.getElementById('UNIT');
var L2 = document.getElementById('QID');
if(! L1.selectedIndex || ! L2.selectedIndex) return;
//以下、テスト用(本番では次行を有効に、次次行をコメントアウト)
//location.href = L2.options[L2.selectedIndex].value;
alert('JUMP先:'+L2.options[L2.selectedIndex].value);
}
</script>
</head>
<body>
<select id="UNIT" onchange="sample_select()">
<option value="">UNIT</option>
<option value="1,3">1</option>
<option value="2,2">2</option>
<option value="3,3">3</option>
<!-- 以下 "53,n" まで続く "n"はそのユニットの問題の個数-->
</select>
<select id="QID">
<option value="">問題</option>
</select>
<input type="button" value="GO" onclick="sample_go()">
</body>
</html>
No.1
- 回答日時:
以下、サンプルです。
書かれていない不明瞭な仕様を勝手に解釈したので要望とは違うかもしれませんが。
<html>
<head>
<title></title>
<script type="text/javascript">
function sample_select(){
var L1 = document.getElementById('LIST1');
var SLIST = document.getElementById('SECOND-LIST').getElementsByTagName('select');
for(var i=0;SLIST[i];i++){
SLIST[i].style.display = (SLIST[i].id == L1.options[L1.selectedIndex].value)?'inline':'none';
}
}
function sample_go(){
var L1 = document.getElementById('LIST1');
var L2 = document.getElementById(L1.options[L1.selectedIndex].value);
//以下、テスト用(本番では次行を有効に、次次行をコメントアウト)
//location.href = L2.options[L2.selectedIndex].value;
alert('JUMP先:'+L2.options[L2.selectedIndex].value);
}
</script>
</head>
<body>
<select id="LIST1" onchange="sample_select()">
<option value="LIST_A">A</option>
<option value="LIST_B">B</option>
<option value="LIST_C">C</option>
</select>
<span id="SECOND-LIST">
<select id="LIST_A">
<option value="a1.pdf">A-1</option>
<option value="a2.pdf">A-2</option>
<option value="a3.pdf">A-3</option>
</select>
<select id="LIST_B" style="display:none">
<option value="b1.pdf">B-1</option>
<option value="b2.pdf">B-2</option>
</select>
<select id="LIST_C" style="display:none">
<option value="c1.pdf">C-1</option>
<option value="c2.pdf">C-2</option>
<option value="c3.pdf">C-3</option>
<option value="c4.pdf">C-4</option>
</select>
</span>
<input type="button" value="GO" onclick="sample_go()">
</body>
</html>
ご回答ありがとう御座います。不明瞭な点が多く、すみません。
具体的には、ある問題集の解答のPDFの配布で使用したいと思っております。問題集のユニット(53のユニット)ごとにA~BないしCの問題があり、メニュー1でユニットの指定、メニュー2で問題の指定をするようにしたいです。
早速試したのですが、プルダウンメニューとGOのボタンの間に、かなりスペースが開いてしまいます。(メニューの候補が多いせいか…)これを解消する方法はないでしょうか?
ちなみに、この方法で行うとHTMLドキュメントが13KBになりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
VBScriptでHTMLのセレクトボッ...
-
selectを変更不可にしたい
-
webページの一部のみの更新につ...
-
メニューの選択項目に応じて、...
-
selectボックスの選択結果を変...
-
<input>の選択肢をプルダウンメ...
-
<select> をmultiple にしてい...
-
validateForm firefoxでalertが...
-
リストボックス内の重複したも...
-
プルダウンの選択値により活性...
-
【javascript】連想配列からセ...
-
条件により押せないボタンを作...
-
option 選択による表示&非表示
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
formで項目を連結したい
-
一覧から選択した行の行番号を...
-
onchangeイベントを強制的に発...
-
<JavaScript>tableタグを入力不...
-
JavaScriptにて動的に配列を作...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
javascriptでセレクトボックス...
-
同じ名前のセレクトがある場合...
-
全てのselect要素をデフォルト...
-
【javascript】連想配列からセ...
-
スマホのフォームでのselect複...
-
selectを変更不可にしたい
-
JavaScriptで<select>の<option...
-
複数のプルダウンを1つにまとめ...
-
プルダウンの値によって活性・...
-
VBScriptでHTMLのセレクトボッ...
-
webページの一部のみの更新につ...
-
selectのすべての値を送信する方法
-
javascript:データを日本語で...
-
プルダウンのoptionの表示・非...
-
リストボックス内の重複したも...
-
select要素のvalueを配列で取得...
-
C#(csファイル)とjavascriptと...
おすすめ情報