スレッド表示 | フラット表示〕 全トピック 920 件中 418 番目 次≫ ≪前

プルダウン

created: 2005-06-21 19:31 | modified: 2005-07-11 19:09 | reply: 6

[2328] プルダウン

user: 忍耐 | created: 2005-06-21 19:31
はじめまして、PHPを勉強しているものです。援助して頂ければありがたいです。
やりたいことは、データベースにある内容をプルダウンにして表示させるのですが、問題はひとつめのプルを選んだらそれに付随するデータをもうひとつのプルに表示したいのですがうまくいきません。

<form method="POST"target="_parent"action="a">
<table width="100" border="0" align="center" cellpadding="0" cellspacing="1">
<td width="15"><imgsrc="r.gif" width="15" height="10"></td>
<table>
<td><table border="0" align="center" cellpadding="4" cellspacing="1" bgcolor="#663300">
<tr>
<td align="center" bgcolor="#D8E7D1"><font size="2">地区</font></td>
<td bgcolor="#DDD1C6"><font size="2">
<select name="tikuid">
<?
$sql = "select * from table1 where id='$id_i' order by id";
$tiku = mysql_query($sql);
while ($data=mysql_fetch_array($tiku)){
$temp=$data["id"]."-".$data["kenid"] ;
echo "<option value=\"" . $temp . "\"";
echo ">" . $tikudata["tiku"] . "</option>\n";
}
?>
</select></font></td>
</tr>
</table></td>

<select name="tiikiid">
<?
$sql = "select * from table2 where id='$id_1' order by id";
$tiiki = mysql_query($sql);
while ($data1=mysql_fetch_array($tiiki)){
$temp=$data1["id"]."-".$data1["tikuid"]."-".$data1["kenid"] ;
echo "<option value=\"" . $temp . "\"";
echo ">" . $data1["tiiki"] . "</option>\n";
}
?>
</select></font></td>
</tr>
</table></td>
?略?

1番目のプルを選んだら1番目に付随しているデータを2番目のプルに表示させたいのです。
余分な物を削除したのでおかしいかもしれませんが、どなたかこの文章をよんで理解していただければありがたいです。
宜しくお願い致します。
reply: 2331 返信 編集 削除

[2331] Re:プルダウン

user: ぱぴよん | created: 2005-06-22 14:06
忍耐さんはじめまして、ぱぴよんと申します。

2つのコンボボックス(プルダウン)を連動させる方法は2種類あると思います。
コンボボックス1 と コンボボックス2 を連動させるとします。
※コンボボックス1の選択されたアイテムにより、コンボボックス2のアイテムが変わります。

コンボボックス1で選択されたアイテムによって、コンボボックス2のアイテムをどのように変えるかですが、


【方法1:】
1つは忍耐さんがされようとしているように、
PHP(サーバー側)でコンボボックス2を作成する方法です。
この方法はコンボボックス1が選択されたら(違うアイテムになったら)JavaScriptのonChangeイベントでPHPの処理をさせるようにします。
(この方法はコンボボックス1でアイテムを選択するとその都度サーバーにアクセスするようになります。毎回、画面をリロードする感じです。)


【方法2:】
もう1つは1番最初にPHPでHTMLを書き出す際、
コンボボックス1やコンボボックス2の内容をJavaScriptの配列などとして書き出す方法です。
この方法はHTMLを書き出すように、JavaScriptのスクリプトを書きます。
そして、コンボボックス1のアイテムが選択されたらJavaScriptのonChangeイベントで
クライアント側でコンボボックス2のアイテムを変更させるようにします。
ただ、コンボボックスのアイテム数が多くなるとこの方法は処理に時間がかかるかもしれません。

以下、方法2のサンプルです。
//index.html

<html>
<head>
<title>Combobox</title>
<script language="JavaScript" type="text/javascript" src="combobox.js"></script>
</head>
<script language="JavaScript">
<!--
var method_array = new Array();
method_array['A'] = new Array('abs', 'acos', 'alert', 'asin', 'atan', 'atan2');
method_array['B'] = new Array('back', 'big', 'blur', 'bold');
method_array['C'] = new Array('ceil', 'charAt', 'clearTimeout', 'click', 'close', 'confirm', 'cos');

// コンボボックス2のアイテムを変更する関数
function change_comb2(key) {
var comb2 = document.frm1.comb2.options;
if(comb2.length > 0) removeAll(comb2);
for(var i = 0; i < method_array[key].length; i++)
addItem(comb2, method_array[key][i]);
}
//-->
</script>
<body onLoad="change_comb2(document.frm1.comb1.value);">
<form name="frm1" method="post">
<p>
<select name="comb1" onChange="change_comb2(document.frm1.comb1.value);">
<option value="A">Aで始まるメソッド</option>
<option value="B">Bで始まるメソッド</option>
<option value="C">Cで始まるメソッド</option>
</select>
</p>
<p><select name="comb2"></select></p>
</form>
</body>
</html>

//combobox.js

// アイテムを追加する関数(リストの最後に追加)
function addItem(comb_obj, value) {
add_obj = document.createElement("OPTION");
add_obj.value = value;
add_obj.text = value;
comb_obj.add(add_obj);
}

// アイテムを追加する関数(指定されたindexに追加)
function addItemAt(comb_obj, value, index) {
add_obj = document.createElement("OPTION");
add_obj.value = value;
add_obj.text = value;
comb_obj.add(add_obj, index);
}

// アイテムを取得する関数(指定されたindexのアイテム(value)を取得)
function getItemAt(comb_obj, index) {
return comb_obj[index].value;
}

// ラベルを取得する関数(指定されたindexのラベル(text)を取得)
function getLabelAt(comb_obj, index) {
return comb_obj[index].text;
}

// アイテムを移動する関数(指定されたindexをmove_indexに移動)
function move(comb_obj, index, move_index) {
var value = getItemAt(comb_obj, index);
remove(comb_obj, index);
addItemAt(comb_obj, value, move_index);
}

// アイテムを削除する関数(指定されたindexのアイテムを削除)
function remove(comb_obj, index) {
comb_obj.remove(index);
}

// アイテムを全て削除する関数
function removeAll(comb_obj) {
for(var i = comb_obj.length - 1; i >= 0; i--) {
remove(comb_obj, i);
}
}

PHPで書き出す部分はindex.htmlの内容です。
JavaScriptの配列method_arrayのように
データベースの内容を配列へ代入します。
JavaScript自体はサンプルなので、忍耐さんの使用方法に合わせて変更する必要があります。
例えば、プルダウンに表示する内容と値が違います。

◆サンプル
<option value="a">a</option>

◆忍耐さんの場合
<option value="a">b</option>


どちらの方法を取るかは人によって違うと思いますので、忍耐さん次第です(@^-^@)
参考になれば幸いです。
Parent: 2328  reply: 2332 2333 返信 編集 削除

[2332] プルダウン

user: 忍耐 | created: 2005-06-22 15:47
ぱぴよんさん、お忙しいところありがとうございます。
早速やってみます。結果がわかり次第報告します。がんばります。
Parent: 2331  返信 編集 削除

[2333] 方法2でのPHPの処理

user: ぱぴよん | created: 2005-06-22 20:26
方法2でのPHPの処理のサンプルを作成しました。(index.htmlの内容)

//index.php

<?php
///////////////////////////////////////////////////////////////////
// テスト用
///////////////////////////////////////////////////////////////////
if(isset($_POST['submit'])) {
print "<p>以下のものが選択されました。</p>\n".
"<p>コンボボックス1&nbsp;=>&nbsp;".$_POST['comb1']."</p>\n".
"<p>コンボボックス2&nbsp;=>&nbsp;".$_POST['comb2']."</p>\n".
"<p><input type=\"button\" name=\"back\" value=\" 戻る \" onClick=\"history.back(-1);\"></p>";
exit;
}

///////////////////////////////////////////////////////////////////
// 初期化
///////////////////////////////////////////////////////////////////
$js_array_name = 'array'; // JavaScriptの配列名
$array = array(); // コンボボックスの内容(全データ)
$keys = array(); // comb1のアイテム
$db_name = ''; // データベース名
$db_user = ''; // データベースユーザー
$db_pw = ''; // データベースパスワード
$table = ''; // アクセステーブル名
$comb1 = ''; // コンボボックス1のデータベースのフィールド名
$comb2 = ''; // コンボボックス2のデータベースのフィールド名

///////////////////////////////////////////////////////////////////
// データベースからコンボボックスのデータを取得する
///////////////////////////////////////////////////////////////////
$conn = odbc_connect($db_name, $db_user, $db_pw);
$sql = "SELECT $comb1, $comb2 FROM $table ORDER BY $comb1;";
$res = odbc_exec($conn, $sql) or die("データベース接続エラー");
while(odbc_fetch_row($res)) {
// コンボボックス1のアイテム
$comb1_item = odbc_result($res, 1);
// コンボボックス2のアイテム
$comb2_item = odbc_result($res, 2);
$array[$comb1_item][$comb2_item] = "'".$comb2_item."'";
}
odbc_close($conn);
$keys = array_keys($array);
?>
<html>
<head>
<title>Combobox</title>
<script language="JavaScript" type="text/javascript" src="combobox.js"></script>
</head>
<script language="JavaScript">
<!--
// JavaScript配列の生成
var <?=$js_array_name?> = new Array();
<?php
// コンボボックス1に関連するコンボボックス2のアイテム配列の生成
for($i = 0; $i < count($keys); $i++) {
$items = implode(', ', $array[$keys[$i]]);
print " ".$js_array_name."['$keys[$i]'] = new Array($items);\n";
}
?>

// コンボボックス2のアイテムを変更する関数
function change_comb2(key, array) {
var comb2 = document.frm1.comb2.options;
if(comb2.length > 0) removeAll(comb2);
for(var i = 0; i < array[key].length; i++)
addItem(comb2, array[key][i]);
}
//-->
</script>
<body onLoad="change_comb2(document.frm1.comb1.value, <?=$js_array_name?>);">
<form name="frm1" method="post">
<p>
<select name="comb1" style="width:150px;" onChange="change_comb2(document.frm1.comb1.value, <?=$js_array_name?>);">
<?php
for($i = 0; $i < count($keys); $i++)
print " <option value=\"$keys[$i]\">$keys[$i]</option>\n";
?>
</select>
</p>
<p><select name="comb2" style="width:150px;"></select></p>
<p><input type="submit" name="submit" value=" 決定 "></p>
</form>
</body>
</html>
Parent: 2331  reply: 2335 返信 編集 削除

[2335] サンプル(機能追加)

user: ぱぴよん | created: 2005-06-23 11:24
<option value="data">label</option>

前回のサンプルでは上記での
data と label が同じものしか代入できなかったので、
data と label に違うものを代入できるように変更しました。

◆前回
<option value="aaa">aaa</option>

  ↓↓↓

◆今回
<option value="aaa">bbb</option>


以下サンプルです。
※index.php、combobox.js ともに変更しています。

//index.php

<?php
/* ----------------------------------------------------------------
◆『 data 』、『 label 』の説明
data : 内部データ(option での value)
label: 表示データ(option での text)

例)
<select>
<option value="data">label</option>
</select>
---------------------------------------------------------------- */

///////////////////////////////////////////////////////////////////
// テスト用
///////////////////////////////////////////////////////////////////
if(isset($_POST['submit'])) {
print "<p>以下のものが選択されました。</p>\n".
"<p>コンボボックス1&nbsp;=>&nbsp;".$_POST['comb1']."</p>\n".
"<p>コンボボックス2&nbsp;=>&nbsp;".$_POST['comb2']."</p>\n".
"<p><input type=\"button\" name=\"back\" value=\" 戻る \" onClick=\"history.back(-1);\"></p>";
exit;
}

///////////////////////////////////////////////////////////////////
// 初期化
///////////////////////////////////////////////////////////////////
$js_array_data = 'data_array'; // JavaScriptの配列名(data用)
$js_array_label = 'label_array'; // JavaScriptの配列名(label用)
$data_array = array(); // コンボボックスの内容(全データ(data用))
$label_array = array(); // コンボボックスの内容(全データ(label用))
$keys = array(); // comb1のアイテム
$db_name = ''; // データベース名
$db_user = ''; // データベースユーザー
$db_pw = ''; // データベースパスワード
$table = ''; // アクセステーブル名
$comb1 = ''; // コンボボックス1のデータベースのフィールド名
$comb2_data = ''; // コンボボックス2のデータベースのフィールド名(data)
$comb2_label = ''; // コンボボックス2のデータベースのフィールド名(label)

///////////////////////////////////////////////////////////////////
// データベースからコンボボックスのデータを取得する
///////////////////////////////////////////////////////////////////
$conn = odbc_connect($db_name, $db_user, $db_pw);
$sql = "SELECT $comb1, $comb2_data, $comb2_label FROM $table ORDER BY $comb1;";
$res = odbc_exec($conn, $sql) or die("データベース接続エラー");
while(odbc_fetch_row($res)) {
// コンボボックス1のアイテム
$comb1_data = odbc_result($res, 1);
// コンボボックス2のアイテム(data)
$comb2_data = odbc_result($res, 2);
// コンボボックス2のアイテム(label)
$comb2_label = odbc_result($res, 3);
// コンボボックスのデータ配列
$data_array[$comb1_data][$comb2_data] = "'".$comb2_data."'";
// コンボボックスのラベル配列
$label_array[$comb1_data][$comb2_data] = "'".$comb2_label."'";
}
odbc_close($conn);
$keys = array_keys($data_array);
?>
<html>
<head>
<title>Combobox</title>
<script language="JavaScript" type="text/javascript" src="combobox.js"></script>
</head>
<script language="JavaScript">
<!--
// JavaScript配列の生成
var <?=$js_array_data?> = new Array();
var <?=$js_array_label?> = new Array();
<?php
///////////////////////////////////////////////////////////////////
// コンボボックス1に関連するコンボボックス2のアイテム配列の生成
///////////////////////////////////////////////////////////////////
for($i = 0; $i < count($keys); $i++) {
// コンボボックスのデータ配列
$data = implode(', ', $data_array[$keys[$i]]);
print " ".$js_array_data."['$keys[$i]'] = new Array($data);\n";
// コンボボックスのラベル配列
$label = implode(', ', $label_array[$keys[$i]]);
print " ".$js_array_label."['$keys[$i]'] = new Array($label);\n";
}
?>

// コンボボックス2のアイテムを変更する関数
function change_comb2(key, data_array, label_array) {
var comb2 = document.frm1.comb2.options;
if(comb2.length > 0) removeAll(comb2);
for(var i = 0; i < data_array[key].length; i++)
addItem(comb2, data_array[key][i], label_array[key][i]);
}
//-->
</script>
<body onLoad="change_comb2(document.frm1.comb1.value, <?=$js_array_data?>, <?=$js_array_label?>);">
<form name="frm1" method="post">
<p>
<select name="comb1" style="width:150px;" onChange="change_comb2(document.frm1.comb1.value, <?=$js_array_data?>, <?=$js_array_label?>);">
<?php
for($i = 0; $i < count($keys); $i++)
print " <option value=\"$keys[$i]\">$keys[$i]</option>\n";
?>
</select>
</p>
<p><select name="comb2" style="width:150px;"></select></p>
<p><input type="submit" name="submit" value=" 決定 "></p>
</form>
</body>
</html>

//combobox.js

// アイテムを追加する関数(リストの最後に追加)
function addItem(comb_obj, value, label) {
add_obj = document.createElement("OPTION");
add_obj.value = value;
add_obj.text = label;
comb_obj.add(add_obj);
}

// アイテムを追加する関数(指定されたindexに追加)
function addItemAt(comb_obj, value, label, index) {
add_obj = document.createElement("OPTION");
add_obj.value = value;
add_obj.text = label;
comb_obj.add(add_obj, index);
}

// アイテムを取得する関数(指定されたindexのアイテム(value)を取得)
function getItemAt(comb_obj, index) {
return comb_obj[index].value;
}

// ラベルを取得する関数(指定されたindexのラベル(text)を取得)
function getLabelAt(comb_obj, index) {
return comb_obj[index].text;
}

// アイテムを移動する関数(指定されたindexをmove_indexに移動)
function move(comb_obj, index, move_index) {
var value = getItemAt(comb_obj, index);
var label = getLabelAt(comb_obj, index);
remove(comb_obj, index);
addItemAt(comb_obj, value, label, move_index);
}

// アイテムを削除する関数(指定されたindexのアイテムを削除)
function remove(comb_obj, index) {
comb_obj.remove(index);
}

// アイテムを全て削除する関数
function removeAll(comb_obj) {
for(var i = comb_obj.length - 1; i >= 0; i--) {
remove(comb_obj, i);
}
}
Parent: 2333  reply: 2338 返信 編集 削除

[2338] サンプル

user: 忍耐 | created: 2005-06-30 21:28
何度もありがとうございます。
会社の研修があったため、昨日戻ってきました。時間がかかるかもしれませんがやってみます。
Parent: 2335  reply: 2359 返信 編集 削除

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

user: 忍耐 | created: 2005-07-11 19:09
遅くなりましたが、なんとかいきました。
ありがとうございました。
Parent: 2338  返信 編集 削除
スレッド表示 | フラット表示〕 全トピック 920 件中 418 番目 次≫ ≪前
ページの一番上へ
Googleグックマークに登録 Yahooグックマークに登録 livedoorクリップに登録 @niftyクリップに登録 はてなブックマークに登録 deliciousに登録 Buzzurlに登録 FC2ブックマークに登録
最近更新された掲示板トピックス
管理人Blog
Yahoo Search

最近更新したNote
PHPマニュアル
今日のブックマーク
PHPマニュアル関数検索
関数名を入力し検索ボタンをクリック↑