人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

検索結果をPHPを使ってリストボックスに出すにはどうしたらよいでしょうか?

イメージ的には
http://jsajax.com/Articles/ListBox/339
のようなものの片方に、検索結果を入れたもの。
検索結果を選択し、対象になったものを隣のリストボックスに入れるというものを想定します。

リンク先にでもよいのでコード付きでよろしくお願いします。

●質問者: robopit
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:イメージ コード ボックス リスト リンク
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●50ポイント

JavaScript + Ajax 実践サンプル集 - リストボックス間でアイテムを移動

(上のメニューからコード参照できる)



質問文のリンク先のコードのoption部分だけ書き換えたもの。この場合$optionsに検索結果を配列で入れておく。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>ListBox (DOM Level0)</title> 
<script type="text/javascript"> 
window.onload = function() { 
 document.getElementById("btnMoveRight").onclick = moveItems; 
 document.getElementById("btnMoveLeft").onclick = moveItems; 
} 
function moveItems() { 
 var leftBox = document.getElementById("ListBox1"); 
 var rightBox = document.getElementById("ListBox2"); 
 var fromBox, toBox; 
 
 if (this.value == "→") { 
 fromBox = leftBox; toBox = rightBox; 
 } 
 else if (this.value == "←") { 
 fromBox = rightBox; toBox = leftBox; 
 } 
 
 if ((fromBox != null) && (toBox != null)) { 
 if(fromBox.length < 1) { 
 alert("リストボックスにアイテムがありません!"); 
 return false; 
 } 
 if(fromBox.selectedIndex == -1) { 
 alert("移動するアイテムを選択してください!"); 
 return false; 
 } 
 while ( fromBox.selectedIndex >= 0 ) { 
 var newOption = new Option(); 
 newOption.text = fromBox.options[fromBox.selectedIndex].text; 
 newOption.value = fromBox.options[fromBox.selectedIndex].value; 
 toBox.options[toBox.length] = newOption; 
 fromBox.remove(fromBox.selectedIndex); 
 } 
 } 
 return false; 
} 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<select id="ListBox1" size="5" multiple="multiple">
<?php

$options = array('aaa','bbb','ccc');
foreach ($options as $option) {
 echo "<option value=\"$option\">$option</option>";
}
?>
</select>
</td> 
<td> 
 <input id="btnMoveRight" type="button" value="→" /> 
 <br /> 
 <input id="btnMoveLeft" type="button" value="←" /> 
</td> 
<td> 
 <select id="ListBox2" size="5" multiple="multiple"> 
 </select> 
</td> 
</tr> 
</table> 
</body> 
</html>

参考:

◎質問者からの返答

回答ありがとうございます。

リンクまで張っていただいてありがとうございます。


2 ● じゅぴたー
●150ポイント ベストアンサー

PHPでとのことですので、こんな感じでいかがでしょう。

あえてJavaScriptは使いませんでした。

矢印ボタンを押すたびにページ遷移が発生します。

<?php
$Encode = 'UTF-8';
$Myself = basename($_SERVER['SCRIPT_NAME']);

//選択対象
$sour = array('Item1', 'Item2', 'Item3', 'Item4', 'Item5');
$dest = array();

//選択リストを作成
function sprintOption($sour, $dest) {
 $html =<<< EOD
<table border="0">
<tr><td>
<select id="sour" name="sour" size="5">

EOD;
 foreach ($sour as $val) {
 $html .=<<< EOD
<option value="{$val}">{$val}</option>

EOD;
 }
 $html .=<<< EOD
</select>
</td><td>
<input type="submit" id="add" name="add" value="" /><br />
<input type="submit" id="del" name="del" value="" />
</td><td>

<select id="dest" name="dest" size="5">
EOD;
 foreach ($dest as $val) {
 $html .=<<< EOD
<option value="{$val}">{$val}</option>

EOD;
 }
 $html .=<<< EOD
</select>
</td></tr>
</table>

EOD;
 return $html;
}

//メインプログラム
$dest2 = isset($_POST['dest2']) ? $_POST['dest2'] : '';
//追加
if (isset($_POST['add']) && isset($_POST['sour'])) {
 $dest2 .= ($dest2 == '') ? $_POST['sour'] : ',' . $_POST['sour'];
//削除
} else if (isset($_POST['del']) && isset($_POST['dest'])) {
 $dest2 = preg_replace("/{$_POST['dest']}\,?/iu", '', $dest2);
}

$s = strtok($dest2, ',');
while ($s !== FALSE) {
 $dest[] = $s;
 $s = strtok(',');
}
$sour = array_diff($sour, $dest);

$outstr = sprintOption($sour, $dest);
$Html =<<< EOD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={$Encode}" />
</head>
<body>
<form method="POST" action="{$Myself}">
{$outstr}
<input type="hidden" id="dest2" name="dest2" value="{$dest2}" />
</form>
</body>
</html>

EOD;

// 表示処理
echo $Html
?>
◎質問者からの返答

回答ありがとうございます。

すべてPHPで書いていただけるとは

勉強になります。

ベストアンサーで締め切らせていただきます。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ