- ベストアンサー
コンボボックス選択時に関連する情報をテキストボックスに表示させたい。
現在、以下のようなものをJavaScriptで実現しようとしているのですが、方法がわからないので質問させていただきます。 DBに商品テーブルがあって、カラムが「商品コード」「商品名称」「金額」だとします。 画面にはコンボボックスと右横にテキストボックスがあって、 コンボボックスには商品名称のみ表示、金額はテキストボックスに表示します。 (商品コードは<option>のvalueに設定します) サーバにアクセスせずにコンボボックスの内容を選択するたびに、対応する金額が表示されるようにしたいです。 PHPでコンボボックスを作成するときにvalueに商品コードと金額を区切り記号("_"など)で連結した値を設定しておき、 それを商品コードと金額に分解すれば実現できると思うのですが、もう少しスマートな方法があればと思い、質問させて頂きました。 環境はWindowsXP、PHP5、MYSQLです。 よろしくお願いします。
- danmakuusu
- お礼率66% (8/12)
- JavaScript
- 回答数4
- ありがとう数27
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
>PHPでコンボボックスを作成するときにvalueに商品コードと金額を区切り記号 >("_"など)で連結した値を設定しておき、 単純にvalueに商品コードをいれておき、金額用のリストを用意しておけばよいのでは？ <script> var kingaku={x001:300,y002:200,z003:100}; function setKingaku(obj){ var f=obj.form; if(obj.value==""){f.kingaku.value="";return false;} f.kingaku.value=kingaku[obj.value]; } </script> <form> <select onchange="setKingaku(this)"> <option value="">選択</option> <option value="x001">りんご</option> <option value="y002">みかん</option> <option value="z003">ばなな</option> </select> <input type="text" name="kingaku" value=""> </form>
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
valueに入れると送信時か受取ったサーバ側でコードと金額に分離しないといけないので、titleを使うといいのかな。 <option value="商品コード" title="金額">商品名称</option> これで、選択中にマウスを静止させるとブラウザの機能でtitleの内容をバルーン表示してくれるのでユーザーにも少しだけ優しくなる・・かな。 具体的な状況がわからないのでこれでいいのかもしれないけど、 選択を決定するまで金額が見えないのは不便なんで 普通に商品名称と一緒に表示するべきだとも思うけど。。 なお、金額をテキストボックスに表示、と、ありますが、テキストボックスの金額をサーバ側で受取って処理をするならセキュリティ上問題ありです。 金額はコードによりDBから再び引っ張ってくるべきです。 なんか余計なコトの方が多い回答で失礼。
お礼
いろいろとありがとうございます。 今後に役立ちそうです。
- pick52
- ベストアンサー率35% (166/466)
しまった、サンプル作ってたら一足遅くてかぶった。(^_^; 発想は下の方とほとんど同じようですね。
- pick52
- ベストアンサー率35% (166/466)
イメージとしてはこんな感じですか。 <html lang="ja"> <head> <script> // 連想配列に情報を格納しておく var goods = { '' : '', '1' : '商品1 xxxx', '2' : '商品2 xxxx' }; // リストボックスが変更されたら value 値を // 元にして連想配列から情報を取得する function change() { var form = document.f; form.t.value = goods[form.sel.value]; return; } </script> </head> <body> <form name="f"> <select name="sel" onchange="change();"> <option value="">商品</option> <option value="1">商品1</option> <option value="2">商品2</option> </select> <input type="text" name="t" value=""> </form> </body> </html>
お礼
ありがとうございます。 無事、実現できました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ありがとうございます。 無事、実現できました。