スクロールバー項目ごとに表示する内容を変える方法

このQ&Aのポイント
  • HTML::TEMPLATEを使用してCGIプログラムを作成しています。
  • スクロールバーを使用して選択した項目に応じて表示内容を変えたいのですが、うまくいきません。
  • Javascriptの知識があまりないため、より良い方法があれば教えてください。
回答を見る
  • ベストアンサー

スクロールバー項目ごとに、表示するものをかえる。

こんにちは。 CGIでHTML::TEMPLATEをつかってプログラムをかいています。 そこで、スクロールバーを用いて、選択したものによって表示する内容を変えようと思っているのですが うまくいきません.私が現在書いたものはこのようなかんじです。 function filter(){ var tmp='<TMPL_VAR NAME=GETRIEBE> '; document.getElementById('waelen').innerHTML=tmp; } <form name="select"> <select name="waelen" onCharge="filter();"> <option value="werkstoff">werkstoff</option> <option value="getriebe">getriebe</option> </select> </form> <table><TMPL_LOOP NAME=ALLDATA> <tr><td><TMPL_VAR NAME=DATEI> </td> <span id="waelen"><td><TMPL_VAR NAME=WERKSTOFF> </td></span> ..... というふうに書いていっています。項目は本当はもう少しありますが。省略しました。 これを実装すると、スクロールバーから、項目を選択した際に、<TMPL_VAR NAME=WERKSTOFF>内容がかわるはずなのですが、 うまくいきません。最初の項目だけが、消されてしまいます。おそらく最初に画面を切り替えた時しか データがうけとれないのだとおもいます。 そこで、スクロールの項目を選ぶと、その項目に関連する内容が表示できたりできますか? ようするに、最初からHTMLで4パターンぐらいのテーブルを作っておき、 選択内容によって、コメントアウトをはずすような仕組みです。(そうしないと、HTMLテンプレートのせいでうまくデータがとれないきがしています。) なにか,いい方法があればよろしくお願いします。Javascriptに関する知識はあまりもっていないです。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ひょとして… 「スクロールバー」ってセレクトボックスのことを言ってたりしませんか? 質問の意味がさっぱり理解できないのだけど、なんだか「連動セレクトボックス」のことを言っているような気がするけど違うのかな?? もしそうなら、ここでも何度も質問されているし、ぐぐればいろいろ見つかる。 とりあえず、ぐぐって出てきたもの http://lumber-mill.co.jp/gallery/view/portfolio/yosei/js/combobox http://kawama.jp/archives/2007/03/javascript_3.html http://www.artsnet.jp/archives/445 http://d.hatena.ne.jp/Mug/20060414/1145023696 こちらは、スクリプトオフの場合まで考慮したもの http://d.hatena.ne.jp/Mars/20071109 意味が違っていたら、失礼。

kenpanch7
質問者

お礼

そうですね。言葉が間違っていたみたいです。ありがとうございました

関連するQ&A

  • 動的なセレクトボックスの生成と削除

    CGI(Perl)で、Javascriptを用いWEBアプリケーションを作成しています。 その過程で、追加ボタンを押すとセレクトボックス(5つでひとかたまりです)が増えるJavascriptを作成しています。 しかし、残念ながら削除をする機能をどうしていいか思いつきませんのでお知恵を貸してください。(また、増加ボタンも他にいい方があレバよろしくお願いします。) 今までに作成したのは以下のとおりです。 **********Javascript*********** var copy; function addInput() { copy = document.getElementById('plus') copy.innerHTML="Filter:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <select name='condition'> <option value='and'>AND</option> <option value='or'>OR</option> </select>&nbsp; <select onchange='SetSubMenu(value);'> <option value='Werkstoff'>1.Werkstoff</option> <option value='Shiftfaktor'>2.Shiftfaktor </option> <option value='SurfCorr'>3.SurfCorr</option> </select>&nbsp; <select name='condition'> <option value='like'>like</option> <option value='notlike'>not like</option> <option value='equal'>=</option> <option value='<'><</option> <option value='>'>></option> <option value='<='><=</option> <option value='>='>>=</option> </select>&nbsp; <div id ='Werkstoff' class='secondpulldown'> <select><TMPL_LOOP NAME=EINTRAGWERK> <option value='<TMPL_VAR NAME=WERKSTOFF>'><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP></select></div> <div id ='Getriebe' class='secondpulldown'> <select><TMPL_LOOP NAME=EINTRAGETRIEBE> <option value='<TMPL_VAR NAME=GETRIEBE>'><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP></select></div> &nbsp; <input type='button' onclick='addInput()' value='+'>&nbsp; <input type='button' onclick='delInput()' value='-'> <div id='plus'></div>" } </script> **********stylesheet************* <style type="text/css"><!-- .secondpulldown { display: none; } --></style> <table> <tr> <td>Datenbank:</td> <td colspan="5"> <select name="datenbank"> <option value="bank1">DATEN BANK 1</option> </select> </td> </tr> <tr> <td>Filter:</td> <td> <select name="condition"> <option value="and">AND</option><option value="or">OR</option> </select> </td> <td> <select onchange="SetSubMenu(value);"> <option value="Werkstoff">1.Werkstoff</option> <option value="Shiftfaktor">2.Shiftfaktor </option> <option value="SurfCorr">3.SurfCorr</option> </select> </td> <td> <select name="condition"> <option value="like">like</option> <option value="notlike">not like</option> <option value="equal">=</option> <option value="<"><</option> <option value=">">></option> <option value="<="><=</option> <option value=">=">>=</option> </select> </td> <td> <div id ="Werkstoff" class="secondpulldown"> <select> <TMPL_LOOP NAME=EINTRAGWERK><option value="<TMPL_VAR NAME=WERKSTOFF>"><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP> </select> </div> <div id ="Getriebe" class="secondpulldown"> <select> <TMPL_LOOP NAME=EINTRAGETRIEBE><option value="<TMPL_VAR NAME=GETRIEBE>"><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP> </select> </div> </td> <td> <input type="button" onclick="addInput()" value="+"> <input type="button" onclick="delInput()" value="-"> </td> </tr> <tr> <td colspan='6'><div id="plus"></div></td> </tr> </table> よろしくお願いします。

  • HTML::TemplateのTMPL_LOOPについて

    PerlモジュールのHTML::Templateを利用していますが、多重ループの書き方がわかりません。 以下のようなループがある場合、どのようにperlを記述したらいいでしょうか。 <TMPL_LOOP NAME=LOOPA> <TMPL_VAR NAME=title> <TMPL_LOOP NAME=LOOP_GUEST> <TMPL_VAR NAME=guest_name> </TMPL_LOOP> <TMPL_VAR NAME=time> </TMPL_LOOP> ドキュメントを見ると下記のように記述するようですが、下記を値それぞれではなく、配列を利用する場合にはどのように記述すれば良いでしょうか。 $template->param(LOOP => [ { name => 'Bobby', nicknames => [ { name => 'the big bad wolf' }, { name => 'He-Man' }, ], }, ], );

    • ベストアンサー
    • Perl
  • 携帯用CGIフォームの修正(戻る)ボタンについて

    無料で配布されたCGIで携帯用のメールフォームを作っています。 フォームに入力後〔確認画面へ進む〕ボタンを押してエラーがあればフォームに自動で戻しエラー表示をしています。(入力内容を維持したまま戻されます) ここまではテンプレートでできました。 しかし、送信前の確認画面で、内容を修正するためのボタンがありません。 3つ作ったフォームの内の2つは携帯の戻るボタンで内容を維持したまま戻れたのですが、スクロールをしなければならない程縦長のフォームだけ、どういう訳か携帯の戻るボタンを押しても入力フォームに戻れないです。スクロールの上の方に上がるだけです。 そこで、確認画面に内容を修正するためのボタンを設置しようと考えているのですが、どのような記述をすれば良いのでしょうか? ※内容は維持したまま修正したいです。 確認画面のソースにはこのような記述があったのですがこれが関係していますでしょうか。 <!-- TMPL_LOOP NAME=loop_list --> <input type="hidden" name="<!-- TMPL_VAR NAME=key ESCAPE=HTML -->" value="<!-- TMPL_VAR NAME=value ESCAPE=HTML -->"> <!-- /TMPL_LOOP --> 大変お手数ですが教えていただけると助かります。 宜しくお願い致します。

    • ベストアンサー
    • CGI
  • Selectの項目へのアクセス

    Selectを二つ並べ、左で選択されている項目の内容を右のSelectに追加したいのですが、色々わかりません。 ・項目内容を文字列の取得方法は? ・項目の追加方法は? ・項目内容を書き換えるには? 忙しい時期で恐縮なんですが、よろしくお願いいたします。 <title>新しいページ 1</title> <SCRIPT LANGUAGE="JavaScript"> <!--- function list(src,dst){ for(i=0;i<src.length;i++){ if (src.options[i].selected == true) dst.options[0].value = src.options[i].value; } } //---> </SCRIPT> </head> <body> <form method="POST" name="PostForm"> <table border="0" width="100%"> <tr> <td width="7%"> <select size="5" name="MemberList" multiple> <option>A氏</option> <option>B氏</option> <option>C氏</option> <option>D氏</option> <option>E氏</option> <option>F氏</option> </select></td> <td width="70%"> <select size="5" name="AssignedList" multiple> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> </select></td> </tr> </table> <p><input type="button" value="ボタン" name="B3" onclick="list(MemberList,AssignedList)"></p> </form> </body> </html>

  • HTML::Templateのループと配列のハッシュの作成

    下記の?????の所にpushで配列のハッシュを作成しようと考えていましたが、うまくいきません。 下記のソース自体が的外れでしたら申し訳ございません。?????以外の場所も指摘して頂ければ幸いです。 よろしくお願い致します。 <TMPL_LOOP NAME="loop"> <TMPL_VAR NAME="one"><BR> <TMPL_VAR NAME="two"><BR> <TMPL_VAR NAME="three"><BR> </TMPL_LOOP> use HTML::Template; @data = ('aa<>ab<>ac','ba<>bb<>bc','ca<>cb<>cc'); foreach $xxx (@data) { my ($one,$two,$three) = split(/<>/,$xxx); ???????????????????? } my $template = HTML::Template->new(filename=>'sample.html'); $template->param(loop=>\@loop); print "Content-Type: text/html\n\n"; print $template->output;

    • ベストアンサー
    • Perl
  • option 選択による表示&非表示

    <select name="var"> <option value="1">見せる</option> <option value="2">見せない</option> </select> <!--内容--> <table> <tr></td>内容</td></tr> </table> option 「見せる」を選択した場合、テーブル全体が<tabel>~</table>が表示、 option 「見せない」を選択した場合、テーブル全体が<tabel>~</table>が表示されなようにしたいです。 ご教授よろしくお願いいたします。

  • セレクトボタンで特定の項目でアラート表示

    セレクトボタンで特定の項目でアラート表示 はじめまして。 当方javascript初心者です。 ラジオボタンやチェックボックスで特定のボタンを選択すると アラートが出る、いうことをしています。 ですが、セレクトボタンで特定のボタンを選択したらアラート という事ができません。 「スイカ」と「りんご」に同じアラートを出すには どうすればいいのか、いろいろとサイトを巡っているのですがわかりません。 もう1日この問題で詰まってます。 <form> <table cellpadding="5"> <tr> <td> <input type="radio" onclick=alert('コメント')>100円 <input type="radio" 200円 </td> </tr> <tr> <td> <select name="select"> <option>とくに無し</option> <option>スイカ</option> <option>りんご</option> </select> </td> </tr> </table> </form> どなたかいい方法をご存知の方、是非とも教えていただけないでしょうか。 よろしくおねがいします!

  • htmlファイルからphpファイルへの値の受け渡し

    表を使った問い合わせフォームを作成したのですが、データを受け渡す方法がわかりません!! 初めの問い合わせページは以下のようにhtmlファイルで記述しました。 この場合、次のページにデータを引き渡すphpファイルには、どうのような記述をしたら良いのでしょうか? <form method="post" action="info.php"> <table class="table margin01" width="592" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="190" align="left" bgcolor="#FFF09D">お名前 <span class="tabletext1">※必須</span></td> <td><input name="name" type="text" class="form01" id="name" /><br /> 入力例:山田 太郎 </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">メールアドレス <span class="tabletext1">※必須</span></td> <td><input name="mail" type="text" class="form01" id="mail" /><br /> 入力例:●●●●●●@yamada.co.jp </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">メールアドレス(確認) <span class="tabletext1">※必須</span></td> <td><input name="mail2" type="text" class="form01" id="mail2" /></td> </tr> <tr> <td align="left" bgcolor="#FFF09D">お問い合せ内容 <span class="tabletext1">※必須</span></td> <td> <select name="list" id="list"> <option>お問い合せ内容をお選びください</option> <option>事業内容について</option> <option>求人について </option> <option>その他</option> </select> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">内容 <span class="tabletext1">※必須</span></td> <td><textarea name="content" id="内容" cols="45" rows="5"></textarea></td> </tr> </table> <p align="center" class="margin01"> <input type="reset" value="クリア" /> <input type="submit" value="送信内容を確認する" /> </p> <input type="hidden" name="test" value="cloud" /> </form>

    • ベストアンサー
    • PHP
  • プルダウンによる表示制御方法

    プルダウンの選択内容による表示の切り替えを行いたいです。 例えば、AとCを選択すると下にあるテキストボックスが非表示になり Bを選択するとテキストボックスが表示するように制御を行いたいです。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td> <form name="a"> <SELECT NAME="b"> <OPTION SELECTED> <OPTION VALUE="0">A <OPTION VALUE="1">B <OPTION VALUE="2">C </SELECT> </td></tr> <tr><td> <input type="text" size="6" maxlength="5" name="text1" value=""> </td></tr> </form> </table></form></td></tr></table> すみませんが、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • セレクトボックスの選択項目を変える

    セレクトボックスの選択項目を変えるには どうすればいいですか? <FORM action=./ method=post> <SELECT name=server> <OPTION value=2 selected>2</OPTION> <OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION> </SELECT> </FORM> こういうフォーム(FORMやOPTIONにnameがない)で [4]を選択したいです このフォームを書き換えないで(スクリプトでの書き換えなら○) どうにか変えることはできないでしょうか? IEのみの対応でいいので、お願いします

専門家に質問してみよう