- ベストアンサー
ユーザ選択画面について
よく、アプリケーションを使っていると、画面に左右二つのペイン？があって、左側にユーザ（あるいは機器）一覧、右側に選択されたユーザ一覧（あるいは機器一覧）という構成になっている画面を見かけます。左側のリスト形式になっているユーザ（あるいは機器）一覧から、特定のユーザを選択して、画面中央にある右矢印ボタンを押下すると、選択されたユーザが右側のペイン？にうつり、逆に右側のペインからユーザを選択し、画面中央にある左矢印ボタンを押下すると、選択されたユーザが、一覧に戻るというものです。このような画面を作りたいのですが、 JavaScriptが必要になってくると思われるのですが、テンプレートなどはありますか？なお、サーバサイドスクリプトはPHPを使っています。 参考となる書籍、URLをご教授いただければ幸いです。
- sirius2003
- お礼率32% (71/221)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （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>
お礼
大変ご丁寧な回答ありがとうございました。 まさに、私が求めていたものです。 このたびは本当にありがとうございまいした。