リストボックスをクリックした時の表示行数は決まっていますよね。これを、例えば20行あれば、クリックしたときに20行全部最初のクリックで表示するようにできますか?

#「HTML」のカテゴリーで質問→javascriptならできるかなという助言があったので、こちらで質問させて下さい。
#複数行の表示(size="")のことではありません。
#どうも見えない部分を認識してくれないユーザーさんがあるので、それへの対応です。

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

A 回答 (5件)

うーん、理解してくれてないみたいですね。

^^;

では、例としてこのようなケースを考えてください。
リスト(つうか、コンボボックスだな正確には)の件数が100件あります。
これを、あなたの言うクリックで一覧を表示したときに全件表示で開閉する。
100件のデータが並ぶと、いったいどれくらいのHeightが必要ですかね?
おそらく、大抵のクライアントの画面領域からはみ出ます。
画面外にはみ出た部分のデータは見えないし、スクロールバーも無い。
一体どのように選択するのでしょうね?

わかります?
リストを全件表示で開くというのは、I/Fとしては不完全なのです。
”仮に”できたとしても、意味が無い。
    • good
    • 0
この回答へのお礼

回答ありがとうございました。
「画面はみだし」で、ようやく「限界」を理解できました。

#想定しているのが、標準設定よりも少し行が多いだけのものだったのでこれに気がつきませんでした。
#勉強になりました。

お礼日時:2001/05/31 13:42

どうやらプルダウンメニュー(ドロップダウンメニュー)における


クリック時の表示域の話みたいですね。

最初にm_catさんがおっしゃってるようにブラウザ依存だったと思います。

どうしてもというならDHTMLを使ってこんな形でやる方法もあります。
http://www.tanasan.com/dhtml/dhtml43.htm
しかし、javaAppletやActiveXもそうですがあまり現実的とはいえないかと。

#どうやらユーザー教育した方が早そうです♪
#参考URLは気にしないで下さい・・・・・

参考URL:http://www.usability.gr.jp/alertbox/20001112.html
    • good
    • 0

>どうも見えない部分を認識してくれないユーザーさんがあるので、それへの対応です。


ということは、インターフェースを変更したほうが良いですね。
ラジオボタンやチェックボックスで対応したほうがいいと思います。
そのほうが楽ですし。

JavaScriptでお考えならば参考URLをどうぞ。
非常に役立つサンプル集やリンクが沢山あります。

参考URL:http://allabout.co.jp/computer/javascript/mbody. …
    • good
    • 0

リストボックスの見えていないところも全て選択するということですよね?



リストボックスの全てのOpstionsのselectedにtrueを
設定してあげれば、全部選択状態になりますよ。
(リストボックスは、複数選択可にしないとダメですよ:<select .... multiple>です )

件数は、リストボックスのLengthでわかります。

ただ仕様自体がわからないので、断定できませんが、
クリックした時に全て選択はまずいのではないでしょうか?(全て以外の選択ができないでしょう)
初期表示の時などに、全て選択しておいて、必要のないものを解除していくというのが妥当のように思います。

この回答への補足

回答ありがとうございます。
すみません、「選択」ではなく見えないところも全部表示というのが希望です。

#クリック→全部見える(20行でも)。
#multipleではなく。

補足日時:2001/05/31 10:19
    • good
    • 0

HTML+JavaScriptの範疇ではできません。


#ブラウザの仕様に依存です。

JavaAppletや、ActiveXを使って、自分で作れば可能ですけどね。^^;
    • good
    • 0

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

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

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

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

Qサムネイルをクリックし、メインに表示→クリックでリンク先へ。

サムネイルをクリックし、メインに表示→クリックでリンク先へ。
というJavaScriptを採用したいのですが、下記サイトを参考にして、サムネイルをクリックし、メインに表示までは出来たのですが、メインに表示された画像をクリックして別ページへリンクというのがどうしてもできません。
どのような記述にすれば可能でしょうか?
よろしくおねがいします。

http://chibatch.jp/blog/archives/change-image2.html

Aベストアンサー

#1です。
メインに表示する画像の拡張子jpgをhtmlに書き換えたURLがリンク先になるようにしてあります。
サンプル通り画像の拡張子がjpgじゃなくて、jpegとかJPGとか違うものだと画像へのリンクのままです。

replaceの正規表現(※)を変更すれば他の拡張子に対応させることもできるし、画像URLをHTMLに変換できる法則があるならパスを変更する事もできます。

※ http://www.tohoho-web.com/js/regexp.htm#Expression

Q一回のクリックで、リンク先ページの表示と、フォームの送信を行う方法

左フレームにてリンクがクリックされたら、右上フレームにリンク先のページを表示すると共に、(CGIに向けて)フォーム送信を行い(CGIからの)結果を右下フレームに表示したいと考えております。
複数フレームの表示を同時に変えたり、フォームの送信結果を別フレームに表示する例文などは見つけたのですが、JAVA初心者のため、残念ながら、どのように組み合わせればよいか分かりません。(ちなみに、前者は動作にリンクが、後者はボタンが利用されており、その点でも悩んでおります)
恐れ入りますが、サンプルなど教えていただけると助かります。何卒よろしくお願いいたします。

Aベストアンサー

具体的にどんな状態かはわからないのですが・・・。

送信側はこんな感じです。

-------------------------------------

<FORM name="form_1" method="GET" action="***.cgi" target="frame3">

<!--hidden型の場合-->
<INPUT type="hidden" name="a1" value="b1">

<!--text型の場合-->
<INPUT type="text" name="a2">

<A href="移動先.html" target="frame2" onClick="document.form_1.submit()">送信</A>

</FORM>

-------------------------------------

今の状況(エラーが出る、送(受)信されないなど)と受信側のCGIのソースを教えていただければアドバイスできると思いますが・・・。

Qランダム表示とクリックで表示切替

はじめまして。
今回、以下のような点で頭を悩ませています。
どなたか良い方法を知っている方がいましたら、アドバイスを頂けたらと思います。宜しくお願いいたします。

以下のようなサイトを制作しています。
コンテンツの内容には、3つのカテゴリーがあり、
カテゴリーごとに表示内容が違います。
(レイアウトは同じです)
---------------------------
ボタン1 ボタン2 ボタン3
コンテンツ1


コンテンツ2
---------------------------

ボタン1~3は、カテゴリー選択用のボタン。
コンテンツ1と2は、連動しており、
3つのカテゴリー毎に内容が変わります。
(カテゴリー1の場合、カテゴリー1用の内容のコンテンツ1とコンテンツ2があると言うことです。)

実装したい機能は、
毎回読み込み毎に、ランダムでカテゴリーを切り替えて表示したいのですが、
それと同時に、ボタン1~3で、カテゴリーの切り替えをしたいというものです。(ボタン1をクリックしたらカテゴリー1用のコンテンツ1とコンテンツ2に切り替わるようにしたいのです。)

自分がやったのは、
javascriptをOFFにしている人のために<noscript>タグを使いたいので、コンテンツ部分は、カスタム関数を呼び出すようにしています。
はじめに1~3の乱数を出し、
カスタム関数では、乱数によってカテゴリー毎のソースをdocument.writeするようにしていました。
コンテンツ1と2は、ソース的に場所が離れているため、
関数は、コンテンツ1用とコンテンツ2用を用意しました。
ですが、このやり方では、ボタンを押したときの処理ができなくなってしまいました。

どなたか、良い方法をお知りの方がいましたら、
アドバイスを宜しくお願いいたします。

はじめまして。
今回、以下のような点で頭を悩ませています。
どなたか良い方法を知っている方がいましたら、アドバイスを頂けたらと思います。宜しくお願いいたします。

以下のようなサイトを制作しています。
コンテンツの内容には、3つのカテゴリーがあり、
カテゴリーごとに表示内容が違います。
(レイアウトは同じです)
---------------------------
ボタン1 ボタン2 ボタン3
コンテンツ1


コンテンツ2
---------------------------

ボタン1~3は、カテゴリー選択用のボタン...続きを読む

Aベストアンサー

案1
フレームを使い、htmlを呼び出す(私のやったのと同じ方法)

案2
フレームに対して、
top.フレーム名.document.writeln("ソース");
として書き込む。

案3
document.getElementById('divのid').innerHTML="ソース";
を使う。divタグなどに動的に書き込める。
リロードは必要ないが、onload後に書き込む必要がある。
<div id="hoge"></div>なら
document.getElementById('hoge').innerHTML="ソース";

案4
DOMを使う。
参考URLを見るとよいかも知れません。

案5
<div style="display:none" id="hoge">
<!--内容-->
</div>
としておき、
document.getElementById('hoge').display="block";

document.getElementById('hoge').display="none";
で表示/非表示を切り替える。

メリット・デメリット
案1・2
ほぼどの環境でも動作。ただし、フレームに非対応のときどうするのかを除けば簡単かつ、使える方法。
案3
最近のIE/FireFoxやその他のブラウザで動くが、最近のものでも働かないものがあり、古いブラウザでも動かない。それほど難しくはない。

案4
詳しくないのでなんとも言えませんが、難しい。

案5
これが一番ベターかと思います。

といった感じです。
閲覧の対象と目的で選んでください。
ただし、書き出している内容が、タグを使用するものではなく、
単なる文章などの場合、textareaなどに書き込むほうが早いです。
これ以降に案5を使った場合を示します。
参考になれば幸いです。

<html>
<head>
<script type="text/javascript">
<!--
function ch(c_id,mode){
if(mode==1||document.getElementById(c_id).style.display=="block"){
document.getElementById(c_id).style.display="none";
}
else{
document.getElementById(c_id).style.display="block";
}
}

function sw(a,b){
if(a==1){
ch('c1_1',1);
ch('c1_2',1);
ch('c1_3',1);
}
else{
ch('c2_1',1);
ch('c2_2',1);
ch('c2_3',1);
}
ch('c'+a+'_'+b,0)
}

function rand(){
ch("c1_"+(Math.floor(Math.random()*3)+1),0);
ch("c2_"+(Math.floor(Math.random()*3)+1),0);
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
var b1_1='<input type="button" value="カテゴリー1_1" onclick="sw(1,1)">';
var b1_2='<input type="button" value="カテゴリー1_2" onclick="sw(1,2)">';
var b1_3='<input type="button" value="カテゴリー1_3" onclick="sw(1,3)"><br>';
var b2_1='<input type="button" value="カテゴリー2_1" onclick="sw(2,1)">';
var b2_2='<input type="button" value="カテゴリー2_2" onclick="sw(2,2)">';
var b2_3='<input type="button" value="カテゴリー2_3" onclick="sw(2,3)"><br>';
var val1_1='<div id="c1_1" style="display:none">カテゴリー1の内容:カテゴリー1_1が表示されています。</div>';
var val1_2='<div id="c1_2" style="display:none">カテゴリー1の内容:カテゴリー1_2が表示されています。</div>';
var val1_3='<div id="c1_3" style="display:none">カテゴリー1の内容:カテゴリー1_3が表示されています。</div>';
var val2_1='<div id="c2_1" style="display:none">カテゴリー2の内容:カテゴリー2_1が表示されています。</div>';
var val2_2='<div id="c2_2" style="display:none">カテゴリー2の内容:カテゴリー2_2が表示されています。</div>';
var val2_3='<div id="c2_3" style="display:none">カテゴリー2の内容:カテゴリー2_3が表示されています。</div>';
document.write(b1_1+b1_2+b1_3+val1_1+val1_2+val1_3+b2_1+b2_2+b2_3+val2_1+val2_2+val2_3);
rand();
//-->
</script>
<noscript>
<a href="c1.html" target="ifra">カテゴリー1-1</a>
<a href="c1.html" target="ifra">カテゴリー1-2</a>
<a href="c2.html" target="ifra">カテゴリー1-3</a><br>
<a href="c1.html" target="ifra">カテゴリー2-1</a>
<a href="c1.html" target="ifra">カテゴリー2-2</a>
<a href="c2.html" target="ifra">カテゴリー2-3</a><br>
</noscript>
</body>
</html>

案1
フレームを使い、htmlを呼び出す(私のやったのと同じ方法)

案2
フレームに対して、
top.フレーム名.document.writeln("ソース");
として書き込む。

案3
document.getElementById('divのid').innerHTML="ソース";
を使う。divタグなどに動的に書き込める。
リロードは必要ないが、onload後に書き込む必要がある。
<div id="hoge"></div>なら
document.getElementById('hoge').innerHTML="ソース";

案4
DOMを使う。
参考URLを見るとよいかも知れません。

案5
<div style="display:non...続きを読む

Qクリックで表示、非表示するメガメニュー

クリックで表示して再度クリックすると非表示になるメガメニューを作ろうと思ってます。

下記のページを参考にjQueryでマウスオーバーによるメガメニューは作成しました。
http://www.skuare.net/test/jmegadropdown.html

ただ、jQueryどころかjavascriptも昔少しやった程度しか知識がありませんので、ソースはほぼ上記のページと同じです。

これをクリックでメニュー表示して、再クリックで非表示にするにはどうしたらよいでしょうか?
具体的にはマイクロソフトのページの上にあるようなメニューです。
http://www.microsoft.com/ja-jp/default.aspx

自分の今の知識でjavascriptを使って書いたコードは下記のとおりです。
このように書いていけば出来るとは思うのですが、もっと効率よく出来る方法はあるでしょうか?
よろしくお願いします。

function test1() {
$("#topnav li .products1 .sub").toggle();
$("#topnav li .sale1 .sub").css("display", "none");
}

function test2() {
$("#topnav li .products1 .sub").css("display", "none");
$("#topnav li .sale1 .sub").toggle();
}

<ul id="topnav">
<li>
<a href="#" class="products" onclick="test1()">Products</a>

<div class="products1">

<div style="opacity: 0; display: none; width: 600px;" class="sub">

<ul>
<li><h2><a href="#">menu1</a></h2></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>

<ul>
<li><h2><a href="#">menu2</a></h2></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>

</div>

</div>

</li>
<li>

<a href="#" class="sale" onclick="test2()">Sale</a>

<div class="sale1">

<div style="opacity: 0; display: none; width: 450px;" class="sub">

<ul>
<li><h2><a href="#">menu</a></h2></li>
<li><a href="#">Link - 1</a></li>
<li><a href="#">Link - 2</a></li>
<li><a href="#">Link - 3</a></li>
<li><a href="#">Link - 4</a></li>
</ul>

</div>

</div>

</li>

クリックで表示して再度クリックすると非表示になるメガメニューを作ろうと思ってます。

下記のページを参考にjQueryでマウスオーバーによるメガメニューは作成しました。
http://www.skuare.net/test/jmegadropdown.html

ただ、jQueryどころかjavascriptも昔少しやった程度しか知識がありませんので、ソースはほぼ上記のページと同じです。

これをクリックでメニュー表示して、再クリックで非表示にするにはどうしたらよいでしょうか?
具体的にはマイクロソフトのページの上にあるようなメニューです。
http:...続きを読む

Aベストアンサー

>もっと効率よく出来る方法はあるでしょうか?
ご提示の記述法だと、メニューの数が増えていくとスクリプトもその分増えますし、メニューを変更すればスクリプトも変えなければならないので、効率のよい方法はないかというご質問と解釈しました。


例示のスクリプトは、ほぼ同じことを行なうのにid等を用いて個別に指定する形式となっているので、ご質問のようなことが起こります。
処理内容が同じなので、それをどの要素が対象でも成り立つような考え方に一般化して、コード化すればよろしいかと思います。
対象としているメニューの構成には決まりがあるでしょうから、その決まりを利用してクリックされた要素を基準に相対的な要素関係によって処理の内容を記述するようにすれば、メニューの構成が変わらない限り数の増減や項目の入れ替えがあっても、スクリプトは同じままで対応可能とすることができます。

ちょっと気になったのは、ご提示の処理だと個別のメニューをクリックするとそのサブメニューが開/閉するようになっていますが、あるメニューを開いたときに他の開いているメニューを閉じることはしなくても良いのでしょうか?(ご提示のメガメニューの参考サイトでは開いているメニューはいつも一つになるように制御されているようです)


以下、「開閉するのは子要素のみで、孫・ひ孫要素は関係ないものと限定して良い」場合、つまりメニューの階層が1階層に限定できる場合の具体例ですが…
1)イベントの設定
ご提示のソースではHTML内にonclickで記していますが、通常は
 $("#topnav > li > a").click(function(){ ~
のように設定もスクリプトで行なってしまっていると思います。
jQueryの場合、イベント処理の匿名関数から、クリックの対象要素が「this」で参照できるようになっています。

2)一度に開いている要素を一つとして考えて良いのであれば、全部のメニューを閉じるのは、
 $("#topnav div.sub").hide();
で可能ですが、こうするとクリックされた時点の要素の状態がわからなくなってしまうので、先に開閉状態を取得しておいてから全部閉じ、その後、状態に応じて開くことにするなどの方法が考えられます。

例えば
var elm = $("div.sub:hidden", $(this).parent()); //閉じていた場合のみ取得
$("#topnav div.sub:visible").hide(); //一旦全部非表示(:visibleは無くても可)
elm.show(); //最初に閉じていたら表示する
とか。

* ご提示のソースでは初期設定でstyle="opacity:0"を設定していますが、上記のhide/showではopacityを操作していませんので、初期設定のまま(見えないまま)になりますのでご注意。
また、style="opacity:0"はIE系のブラウザでは通じませんので、こちらもご注意。

3)参考サイトのようにhide/showではなくアニメーション(フェード)効果を付けて表示/非表示を切り替えるのであれば、opacityの設定も必要になります。
その場合は、hide()/show()を利用する代わりに、(参考サイトのように)fadeOut()やfadeTo("normal", 1)などをご利用なさるのがよろしいかと。

>もっと効率よく出来る方法はあるでしょうか?
ご提示の記述法だと、メニューの数が増えていくとスクリプトもその分増えますし、メニューを変更すればスクリプトも変えなければならないので、効率のよい方法はないかというご質問と解釈しました。


例示のスクリプトは、ほぼ同じことを行なうのにid等を用いて個別に指定する形式となっているので、ご質問のようなことが起こります。
処理内容が同じなので、それをどの要素が対象でも成り立つような考え方に一般化して、コード化すればよろしいかと思います。
対...続きを読む

Qクリックで表示/非表示の切り替え

私は今現在HPを作成しているのですが、その中の特定のページでテキストをクリックしたら表示/非表示の切り替えをしたいと考えてます。
表示/非表示自体は検索して出てきたオープンソースを拝借したら出来ました。
ソースは下記のように記述してます。
しかし、既存の状態だと『テキスト1』をクリックして表示させたらもう一度『テキスト1』をクリックしない限り非表示にはなりません。
『テキスト1』をクリックして表示している状態で『テキスト2』をクリックしたら自動的に『テキスト1』の表示されてる部分を非表示しにしたいのですが。

<head>
<SCRIPT type="text/JavaScript">
<!--
function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。
if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する
//指定されたIDのstyle.displayがnoneなら
if( document.getElementById(targetID).style.display == "none") {
//blockに変更する
document.getElementById(targetID).style.display = "block";
} else { //noneでなければ、つまりblockなら
//noneにする
document.getElementById(targetID).style.display = "none";
}
}
}
//-->
</SCRIPT>
</head>
<body>
<a href="#" onClick="showHide('SH-001');return false;">テキスト1</a>
<a href="#" onClick="showHide('SH-002');return false;">テキスト2</a>
<div id="SH-001" style="display: none">テキスト1をクリックしたら表示される部分</div>
<div id="SH-002" style="display: none">テキスト2をクリックしたら表示される部分</div>
</body>

Javascriptについてはまだ知識がなく解決方法が皆目見当もつきません。
ご存知の方いらっしゃいましたらご教示ください。
よろしくお願いします。

私は今現在HPを作成しているのですが、その中の特定のページでテキストをクリックしたら表示/非表示の切り替えをしたいと考えてます。
表示/非表示自体は検索して出てきたオープンソースを拝借したら出来ました。
ソースは下記のように記述してます。
しかし、既存の状態だと『テキスト1』をクリックして表示させたらもう一度『テキスト1』をクリックしない限り非表示にはなりません。
『テキスト1』をクリックして表示している状態で『テキスト2』をクリックしたら自動的に『テキスト1』の表示されてる部分を非表...続きを読む

Aベストアンサー

こういうことでしょうか?

<head>
<SCRIPT type="text/JavaScript">
<!--
var objTextIDArray = new Array("SH-001","SH-002");
function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。
if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する
//指定されたIDのstyle.displayがnoneなら
if( document.getElementById(targetID).style.display == "none") {
//blockに変更する
for(var i = 0; i < objTextIDArray.length; i++)
if(document.getElementById(objTextIDArray[i]))
document.getElementById(objTextIDArray[i]).style.display = "none";
document.getElementById(targetID).style.display = "";
} else { //noneでなければ、つまりblockなら
//noneにする
document.getElementById(targetID).style.display = "none";
}
}
}
//-->
</SCRIPT>
</head>
<body>
<a href="#" onClick="showHide('SH-001');return false;">テキスト1</a>
<a href="#" onClick="showHide('SH-002');return false;">テキスト2</a>
<div id="SH-001" style="display: none">テキスト1をクリックしたら表示される部分</div>
<div id="SH-002" style="display: none">テキスト2をクリックしたら表示される部分</div>
</body>

こういうことでしょうか?

<head>
<SCRIPT type="text/JavaScript">
<!--
var objTextIDArray = new Array("SH-001","SH-002");
function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。
if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する
//指定されたIDのstyle.displayがnoneなら
if( document.getElementById(targetID).style.display == "none") {
//blockに変更する
for(var i = 0; i < objTextIDArray.length; i++)
if(document.g...続きを読む


人気Q&Aランキング

おすすめ情報