• ベストアンサー

ユーザ選択画面について

よく、アプリケーションを使っていると、画面に左右二つのペイン?があって、左側にユーザ(あるいは機器)一覧、右側に選択されたユーザ一覧(あるいは機器一覧)という構成になっている画面を見かけます。左側のリスト形式になっているユーザ(あるいは機器)一覧から、特定のユーザを選択して、画面中央にある右矢印ボタンを押下すると、選択されたユーザが右側のペイン?にうつり、逆に右側のペインからユーザを選択し、画面中央にある左矢印ボタンを押下すると、選択されたユーザが、一覧に戻るというものです。このような画面を作りたいのですが、 JavaScriptが必要になってくると思われるのですが、テンプレートなどはありますか?なお、サーバサイドスクリプトはPHPを使っています。 参考となる書籍、URLをご教授いただければ幸いです。

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

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

探せばどこかにサンプルがありそうな気がしますが… 探すのが面倒なので、とりあえずのサンプルとして、 <html> <head> <style type="text/css"> div#list div { float:left; padding:0.3em; } div#list select { width:7em; } div#list button { margin-top:0.5em; } </style> <script type="text/javascript"> function move(evt) { var t = evt.target || evt.srcElement; if (t.nodeName=='BUTTON') { var sel, idx, n = t.name=='right'?0:1; sel = document.getElementById('list').getElementsByTagName('SELECT'); if (-1 < (idx = sel[n].selectedIndex)) sel[1-n].appendChild(sel[n].options[idx]); } } </script> </head> <body> <div id="list"> <div>登録者一覧<br> <select size=5> <option value="1">田中重雄</option> <option value="2">山下太郎</option> <option value="3">鈴木公平</option> </select> </div> <div onclick="move(event)"> <br><button type="button" name="right">→</button> <br><button type="button" name="left">←</button> </div> <div>選択ユーザ<br> <select size=5> <option value="4">武田一郎</option> <option value="5">水島卓也</option> </select> </div> </div> </body> </html>

sirius2003
質問者

お礼

大変ご丁寧な回答ありがとうございました。 まさに、私が求めていたものです。 このたびは本当にありがとうございまいした。

関連するQ&A

  • ユーザー選択ユーザー選択画面からログイン出来ない

    WindowsXP home sp3 ユーザー選択画面からログイン出来ません。 IEの危弱性のニュースを見て、Microsoft Security Essentials をインストールしましたが、それが原因か否かはわかりませんが、WIndowsが立ち上がりユーザ選択画面が表示されても、ログインできなくなりました。 OSの修復をすれば復旧できますでしょうか? 上記ログイン画面が表示されますが、カーソルは動くものの、ユーザの選択ができず、左下の終了のボタンを押しても終了も電源OFFも出来ません。 Ctrl+Delも効きません。 どうぞよろしくご教示下さい。

  • 右の一覧表から必要なものをクリックすると、左の選択一覧用の表に選択されるようにするためには?

    JavaScriptの勉強中なのですが、どこかのページにて見かけたことのある、以下のような仕掛けを組もうと四苦八苦しております。 どの様にすればよいか皆目見当がつかず、ヒントをいただければと思います。 左右二つに表を作成(問題がなければ<table>コマンドの予定)し、 左側を選択された項目、右側を一覧用の表とする。 右側の一覧表のうちのひとつをクリックすることでその表示が消え、左側の表にクリックされたものが表示される。 左側に選択表示されたものをクリックすることで、左側に選択表示されたものが消えて、元の右の一覧に表示される。 このような仕掛けはJavaScript特有のものだと思うのですが、もしもその方法についてお心当たりのある方はヒントをいただければと思います。 どうぞ、よろしくお願いいたします。

  • ユーザー選択画面について。

     XP Home Editionを使っています。パソコンを起動するとメーカーのロゴが表示された後、「Windows XP Home Edition」という大きなロゴが表示され、その後(複数のユーザーアカウントがある場合)ユーザーの選択画面が出てくると思います。  この画面について質問です。この画面にはユーザーが一覧表示される(恐らく一般的な画面)と、小さなウインドウが表示され、ユーザー名とパスワードを入力してログインする画面の2種類があると思います。私は普段前述の方を使っているのですが、まれに後述の方の画面に勝手に変わってしまうことがあります。なぜでしょうか?また、このログイン画面を設定する方法を教えてください。

  • Windows XP ユーザー選択画面から「終了オプション」ボタンが消えた

    Windows XP ユーザー選択画面から「終了オプション」ボタンがいつのまにか消えてしまいました。 家族4人が使えるように、4つのユーザーを作って、PCを共有使用しています。 以前は、ユーザー選択画面に「終了オプション」ボタンが左下にあったのですが、いつのまにかなくなっており、この画面からシャットダウンや再起動が出来なくなりました。 「終了ボタン」を作る方法を教えてください。

  • iPhone15画面ロック

    この度以前使用していたiPhoneが破損したためiPhone15に替えたのですが、画面オフ(ロック画面)に戻す方法がわかりません。。 以前はサイドボタンを押下する事で、FaceIDやパスコード入力画面に戻っていたのですが、iPhone15にしてからサイドボタンを押下しても、上記の画面に戻れません。 また、電源を落としてから起動しようとサイドボタンなどを長押ししても起動されず、充電器を差し込まないと起動しない状態です。 サイドボタンの初期不良の可能性があるのでしょうか。。 子供が触ってしまって困っているので、有識の方ご教授ください。

  • アイコン選択

    アイコンとボタンが表示されている状態で ボタンをクリックするとアイコン一覧が表示し、 その中のアイコンを選択すると一覧は閉じて、 元あったアイコンのボタンのアイコンの方が選択したアイコンに変わる といったJavaScriptの解説など何処かに無いでしょうか?

  • Win Vistaで1分経つと自動的にユーザー選択画面になってしまいま

    Win Vistaで1分経つと自動的にユーザー選択画面になってしまいます。 画面中央にオレンジの花のアイコンの画面です。 キーボードの上に物を置いた時に設定されてしまったようなのですが、解除方法をご存知でしたらお願いします。

  • XP Proで、ビデオドライバーを入れてから、ユーザー名をの画面に?

    XP pro. で、起動するとそのままデスクトップ画面になっていましたが、 ビデオドライバーをインストールしてから、起動させると、左側ユーザー名をクリックしてください。右側ユーザー画像とユーザー名の画面になる様になったのですが、 起動させるとそのままデスクトップ画面になるように戻したいのですが? ユーザーは、私だけなのですが・・・

  • Win10のスタート画面を変更するには。

    皆さん、よろしくお願いします。 以前は、スタートボタンを押すと、ドキュメント、ダウンロード等のような表示をしていました(右側)。 何かのタイミングで、それらがアイコンになって、起動できるソフト一覧が出るようになっております(左側)。 これを元に戻す方法はありますでしょうか? 左側のアイコンの三本線をクリックすると、右側のようになります。 つまり、スタートボタンを押すと、すぐに右側ようにする方法を教えていただけないでしょうか。

  • IE8にしたら楽天画面がおかしい!?

    IE7の時は通常、 楽天TOP画面がフラッシュも正常に動き 全体の画面が綺麗に映っていましたが、 IE8にしたら、TOP画面上部分にある フラッシュは動くのですが、 どうやら、IE7の時の表示の仕方と違い IE8では、画面中央にある フラッシュ画面隣にある1~4のボタンがものすごくでかくなりました。 また、画面の左側にはジャンル一覧がありそこから 商品を選ぶ事になり、 IE7で映し出されていた時は ジャンルは画面中央に単語ごとに商品名が表示されているのに IE8にでは 左側にあるジャンルからプルダウンメニューみたいな →矢印にカーソルをあてながら商品を探すようになりました。 皆様も このような状態でしょうか? OS WIN XP SP3 Adobe Flash Player 10.1.102.64 です。 ※その他、ヤフーサイトやMSNサイトなどは 通常通りに映し出されていると思われます。 何故か、楽天がこのような状態です。

専門家に質問してみよう