Smartyでセレクトボックスが選択された時に値を表示する方法

前へ 次へ
このQ&Aのポイント
  • Smartyを使用してセレクトボックスが選択された際に、値を表示する方法について質問です。
  • 具体的には、セレクトボックスの選択値をキーにデータベースに接続し、その値を取得して<div></div>内に表示することができるかということです。
  • また、その場合にはプラグインクラスを作成して表示することができるのかも知りたいです。
回答を見る
  • ベストアンサー

Smartyで、セレクトボックスが選択された時に

いつもお世話になっています。 Smartyに関して質問します。 以下のようなtemplateがあった場合に、 <html> <head><title></title> </head> <body> <selection name="hobby"> <option name="hobby[]" value="0" >スポーツ</option> <option name="hobby[]" value="1">卓球</option> </selection> <div id ="hobby_details">ここに、選択された値により表示する内容を変える </div> </body> </html> セレクトが選択されたら、それをキーにdbに接続して値をとってき、 再度<div></div>内部に値を表示することはできないのでしょうか？ その場合として、pluginクラスを作って表示することはできないのでしょうか？ したいのが、セレクトボックスが選択されたときに、<div></div>内に値を表示したいのです。 宜しくお願いします。

  • PHP
  • 回答数2
  • ありがとう数1

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

  • ベストアンサー
  • freetaka
  • ベストアンサー率53% (106/197)
回答No.2

あまり難しく考えなくても 選択する度にPHP内でDB接続をして値をとってきて テンプレート内に表示することは可能です 質問者さんのPHP内のデータベース接続が どういった記述なのかわからないので データベース接続部分は省略していますが そちらもわからないようであれば 補足もしくは別に質問するのがいいでしょう 簡単な手ほどき的なものになりますが 更新させるためのサンプルを作ってみましたので やってみてください PHPとSmartyを使用しているのであれば理解できる内容です テンプレートの記述（index.tplとして作成してみました) <html> <head> <title>test</title> <body> <form method="post" action="index.php"> <select name="hobby" onChange="submit(this.form)"> <option>スポーツ</option> <option value="0">卓球</option> <option value="1">サッカー</option> <option value="2">バレー</option> <option value="3">リセット</option> </select> </form> <div> {if isset($str)} {$str} {/if} </div> </body> </html> php内の記述 if(isset($_POST['hobby'])){ #本来ならswitch文の内容はいらなく #DBから値をもってきてテンプレートに送るだけの処理になります switch ($_POST['hobby']){ case 0: $smarty -> assign('str', '卓球'); break; case 1: $smarty -> assign('str', 'サッカー'); break; case 2: $smarty -> assign('str', 'バレー'); break; } } $smarty -> display("index.tpl");

その他の回答 (1)

  • foreach
  • ベストアンサー率51% (43/84)
回答No.1

それはPHPでもSmartyでもなくJavaScriptの分野だと思います。 参考URLはjQueryのものですが、一番下にサンプルがありSELECTタグの選択値に応じてDIVの内容を変更してます。 > セレクトが選択されたら、それをキーにdbに接続して値をとってき、 をしたいならAjaxで取ってくるか、あらかじめDBの値をHTMLに書き出しておく必要があるので難易度が上がります。 まずはSELECTの切り替えでDIVを入れ替えるとこまで実装するのが良いでしょう。 それと、 ＞<selection name="hobby"> selectionじゃなくてselectの間違いだと思います。

参考URL：
http://semooh.jp/jquery/api/events/change/fn/
kannitiha
質問者

お礼

ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. PHP

関連するQ&A

  • 2つのセレクトボックスで選択した組み合わせの結果

    社内で個人的に使うためのツールを Google Sites で作成中なのですが、 できれば、セレクトボックスの組み合わせの結果はテキストではなく、 条件に一致した結果でのフローをまとめた画像やGoogleスライドを指定して、 各条件ごとに振り分けて表示させたいと考えています。 ネットで色々と検索しながら試行錯誤した結果、 <textarea> に画像やスライドを反映するのは不可と判断しておりますが、 なにか別の要素を指定することで可能な場合や、 その他に可能な方法があればご教示いただけますと幸いです！ コードは下記です。 </head> <!-- javascriptファイル --> <script type="text/javascript"> function check(f){ var arr={ "A":{"aaa":"Aとaaaを選択しました","bbb":"Aとbbbを選択しました"} ,"B":{"aaa":"Bとaaaを選択しました","bbb":"Bとbbbを選択しました"} }; var select1=f.elements["select1"].value; var select2=f.elements["select2"].value; f.elements["C"].value=(arr[select1] && arr[select1][select2])?arr[select1][select2]:""; } </script> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <body> <p class="title">該当する組み合わせを選択してください。</p> <form> <div class="cp_ipselect cp_sl01"> <select name="select1" onchange="check(this.form);"> <option value="">------ 選択肢①を選択してください ------</option> <option value="A">A</option> <option value="B">B</option> </select> </div> <div class="cp_ipselect2 cp_sl02"> <select name="select2" onchange="check(this.form);"> <option value="">------ 選択肢②を選択してください ------</option> <option value="aaa">aaa</option> <option value="bbb">bbb</option> </select> </div> <p class="title2">選択肢①と②の組み合わせの結果</p> <!-- 下の textarea 箇所に各組み合わせごとにテキストではなく、画像やスライドを表示したいです --> <textarea name="C"></textarea> </form> </div> </body> </html>

  • セレクトボックスを使った計算式

    テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、３つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか？ とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript"> <!-- function keisan(){ 　　　　if(option value="＋"){ 　　　　document.f1.t3.value(document.f1.t1.value + document.f1.t2.value); } } //--> </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="＋">＋</option> <option value="－">－</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。 どうかよろしくお願いします。

  • セレクト選択時にチェックボックスをオフにしたい

    フォームでセレクトを選択すると、連動してチェックボックスをオフにする仕組みを作りたいのですが、分からずjavascriptで解決できないかと思っております。 現在の問題は test1をセレクトし、オプション1のいずれかのチェックボックスにチェックをしたあと、 セレクトを再度し直し、test3を選びオプション3でいずれかのチェックボックスにチェックした場合、 オプション1で選んだチェックボックスの内容も送信されることです。 セレクトで、何かを選択したらチェックボックスがオフされるようになればと思っております。 ちなみに同じページ内にチェックボックスが複数あります。 <html> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ $(".station").addClass('hide'); $("#hoge").change(function(){ $(".station").addClass('hide'); $('#' + $("#hoge option:selected").attr("class")).removeClass("hide"); });}) </script> <style type="text/css"> <!-- .hide{display:none;} --> </style><body><form> <select name="c_s" id="hoge"> <option value="none" selected="selected" class="">選択して下さい</option> <option value="test1" class="c1_1">test1</option> <option value="test2" class="c1_2">test2</option> <option value="test3" class="c1_3">test3</option> </select> <div id="c1_1" class="station opt"> オプション1<br /> <input type="checkbox" name="option1" id="option" value="ch_option1" />ch_option1<br /> <input type="checkbox" name="option2" id="option" value="ch_option2" />ch_option2<br /> </div> <div id="c1_2" class="station opt"> オプション2<br /> <input type="checkbox" name="option11" id="option" value="ch_option11" />ch_option11<br /> <input type="checkbox" name="option12" id="option" value="ch_option12" />ch_option12<br /> <input type="checkbox" name="option13" id="option" value="ch_option13" />ch_option13<br /> </div> <div id="c1_3" class="station opt"> オプション3<br /> <input type="checkbox" name="option21" id="option" value="ch_option21" />ch_option21<br /> <input type="checkbox" name="option22" id="option" value="ch_option22" />ch_option22<br /> </div> </form></body></html>

  • セレクトボックスの操作

    <select name="example1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="1" value="追加"> 例えば、上記のセレクトボックスの3を選択して送信ボタンを押したら、3以外の4つの数字の値を持ったセレクトボックス（select name="example2）を出現させたいのです。（example1を残したまま） 選択した数字以外の値を持ったセレクトボックスを出現させたいです。 <select name="example2"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit"name="2" value="追加"> 上記のようになります。example2の1を選択し送信したら <select name="example3"> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="3" value="追加"> 上記のようになります。 上記の手順でセレクトボックスが3つに増えた場合のソースは次のような感じに <select name="example1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="1" value="取り消し"> <select name="example2"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit"name="2" value="取り消し"> <select name="example3"> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="3" value="追加"> 取り消しを押した場合、そのセレクトボックスを削除し、一番新しいセレクトボックス（example3）に削除された値を追加したいです。 example2を取り消した場合、 <select name="example3"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="3" value="追加"> 上記のようになります。 どのように記述すれば実現可能でしょうか？ ご教示頂けますと幸いです。 宜しくお願いいたします。

  • セレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法

    お世話になっております。 環境： Windows2000 IE6.0 HTMLでセレクトボックス(SELECTタグ)を使用しているのですが、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまいます。 STYLESHEETでWIDTHを指定してみたのですが、選択肢の文字列が途中で切り取られてしまい、使えません。 セレクトボックスの幅を指定し、プルダウンで表示される選択肢の文字列は全て表示されるような方法があれば教えて下さい。 ■ソース■ <html> <head> <STYLE TYPE="text/css"> <!-- SELECT { width: 100px; } --> </STYLE> <title>サンプル</title> </head> <body> <select name="" selected> <option name="0">選択肢１</option> <option name="0">長い文字列XXXXXXXXXXXXXXXXXXXXXXX</option> <option name="0">選択肢３</option> <option name="0">選択肢４</option> </select> </body>

    • ベストアンサー
    • HTML
  • Smartyのセレクトボックスが書けない；；

    情けないことにSmartyをはじめて使ったせいか Selectが書けません。どうやって書けばよいのでしょうか？ dbはSqlite3を使っています。 カテゴリーというセレクトボックスにid、categoryの値を foreachで回転させて入れる理屈です。 http://mylearning.jugem.jp/?eid=13 foreachを100％わかっていないのもありますし、tplファイルにも foreachを使いたいところです。html_optionsはあえて 使っていません；； Smartyを使わないでblogや掲示板は作りました。 ソースごと詳しく教えてもらえるとありがたいです。 よろしくお願いします。

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

    セレクトボックスの選択項目を変えるには どうすればいいですか？ <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のみの対応でいいので、お願いします

  • ２つの<select>フォームの完全連動（自動選択）

    下記のドロップダウンメニューで、 「１．県名」と「２．ふりがな」が完全に連動するjavascriptをご教示ください。 県名を先に選択しても、ふりがなを先に選択しても 対応する項目が自動で選択される動作を希望しております。 <html> <head></head> <body> <form> １．県名<br> <select name="Address1" class="forms1"> <option value=""></option> <option value="0">東京</option> <option value="1">神奈川</option> <option value="2">埼玉</option> <option value="3">千葉</option> </select> ２．ふりがな<br> <select name="Address2" class="forms1"> <option value=""></option> <option value="0">とうきょう</option> <option value="1">かながわ</option> <option value="2">さいたま</option> <option value="3">ちば</option> </select> </form> </body> </html>

  • セレクトボックスで現在選択されている値

    下記のセレクトボックスがあります。 　print "<select name='atai'>"; 　print "<option value='abc'>abc</option>"; 　print "<option value='123'>123</option>"; 　print "<option value='xyz'>xyz</option>"; 　print "</select>"; 現在、選択されている値を　$int　の変数に入力 したいのですが、どうしたらいいのでしょうか。 例えば、$int=・・・・・・;　というふうに代入 文でできることなのでしょうか。 　 この場合、現在表示されているCGIで、 $int が、abc か 123 か xyz か知りたい のです。

    • ベストアンサー
    • Perl
  • セレクトボックスの組み合わせを制限する

    ６つあるイメージの中から４回選択するものです。さらにこの選択に以下の条件をつけたいのですが。 ・４回選択する中で、イメージ１～３の中から２個 イメージ４～６の中から２個しか選択できない。 というものなのですが、javascriptでこういった条件を指定できるのでしょうか？ <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <!--1つめ--> <FORM name="myform"> <SELECT name="imgselect" > <OPTION>イメージ1 <OPTION>イメージ2 <OPTION>イメージ3 <OPTION>イメージ4 <OPTION>イメージ5 <OPTION>イメージ6 </SELECT> <!--2つめ--> <SELECT name="imgselect2" > <OPTION>イメージ1 <OPTION>イメージ2 <OPTION>イメージ3 <OPTION>イメージ4 <OPTION>イメージ5 <OPTION>イメージ6 </SELECT> <!--3つめ--> <SELECT name="imgselect3" > <OPTION>イメージ1 <OPTION>イメージ2 <OPTION>イメージ3 <OPTION>イメージ4 <OPTION>イメージ5 <OPTION>イメージ6 </SELECT> <!--4つめ--> <SELECT name="imgselect4" > <OPTION>イメージ1 <OPTION>イメージ2 <OPTION>イメージ3 <OPTION>イメージ4 <OPTION>イメージ5 <OPTION>イメージ6 </SELECT> </FORM> </BODY> </HTML>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する