プルダウンメニューからPDF表示

解決済

質問者：bad-ama
質問日時：2007/10/20 12:30
回答数：2件

プログラミング、初心者です。
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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： steel_gray
回答日時：2007/10/20 19:20

#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>

</select>
<select id="QID">
<option value="">問題</option>
</select>
<input type="button" value="GO" onclick="sample_go()">

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。きれいにプルダウンメニューが作れました！丁寧なご指導ありがとう御座いますm(__;)m

通報する

お礼日時：2007/10/20 22:40

No.1

回答者： steel_gray
回答日時：2007/10/20 15:19

以下、サンプルです。

書かれていない不明瞭な仕様を勝手に解釈したので要望とは違うかもしれませんが。

<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>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとう御座います。不明瞭な点が多く、すみません。
具体的には、ある問題集の解答のPDFの配布で使用したいと思っております。問題集のユニット（53のユニット）ごとにA～BないしCの問題があり、メニュー１でユニットの指定、メニュー２で問題の指定をするようにしたいです。
早速試したのですが、プルダウンメニューとGOのボタンの間に、かなりスペースが開いてしまいます。（メニューの候補が多いせいか…）これを解消する方法はないでしょうか？
ちなみに、この方法で行うとHTMLドキュメントが13KBになりました。

通報する

お礼日時：2007/10/20 16:59

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