- PR -

ＨＴＭＬテーブルの項目にプルダウンを使用したい

1|2 次のページへ»
投稿者投稿内容
見習開発者
会議室デビュー日: 2004/09/16
投稿数: 4
投稿日時: 2004-09-16 16:28
はじめまして。
最後のところでつまづいてしまい、どうしても分からないのでアドバイスお願いします。

開発内容：ＤＢからデータを読み込み、その値を変更してＤＢに更新しようとするものです。
　第１、２項目はプルダウンで選択し、その他の項目は手入力です。
　更新方法は第１番目の項目をプルダウンで選択し、その値によって第２項目のプルダウンの値
　を変更させたいと考えています。
問題点：読み込んだデータが１行の時はプルダウンが機能するのですが、２行になるとプルダウ　ンの項目すら出てきません。
　複数行でも機能させるにはどうすればよいのでしょうか。

＊−−−−−−−−−−−−−　内容　−−−−−−−−−−−−−−−−−−−−−−＊
for (int i = 0; i < P_sentaku.length; i++) {
i_sentaku = Integer.valueOf(P_sentaku[i]).intValue();

sql = "select * from 管理台帳 where SEQ = "+ i_sentaku +"";

//データ取得
ResultSet rs = db.getResultSet(sql);

//取得された結果に対しての処理
while(rs.next()) {

String d_syozoku = rs.getString("所属");
String d_ka = rs.getString("課");
String d_name = rs.getString("氏名");
String d_userid = rs.getString("UserID");
String d_pcid = rs.getString("PCID");
String d_ip = rs.getString("IP");
String d_mac = rs.getString("MAC");
String d_maker = rs.getString("ﾒｰｶｰ");
String d_kisyu = rs.getString("機種名");
String d_kataban = rs.getString("型番");
String d_serial = rs.getString("ｼﾘｱﾙNo");
int d_seq = rs.getInt("SEQ");
//入力用フィールド定義
Stringcell1,cell2,cell3,cell4,cell5,cell6,cell7,cell8,cell9,cell10,
cell11,cell12;


cell1 = "<SELECT onchange=Rdp(); name=i_syozoku><OPTION value=\"" +
d_syozoku + "\" selected> "+ d_syozoku +"　 </OPTION></SELECT>";

cell2 = "<SELECT onchange=Hdp(); name=i_ka><OPTION value=\"" + d_ka +
"\" selected> " + d_ka + "　</OPTION></SELECT></DIV></TD>";

cell3 = "<input type =\"text\" name=\"i_name\" value=\"" + d_name + "\">";

cell4 = "<input type =\"text\" name=\"i_userid\" value=\"" + d_userid
+ "\">";

cell5 = "<input type =\"text\" name=\"i_pcid\" value=\"" + d_pcid + "\">";

cell6 = "<input type =\"text\" name=\"i_ip\" value=\"" + d_ip + "\">";

cell7 = "<input type =\"text\" name=\"i_mac\" value=\"" + d_mac + "\">";

cell8 = "<input type =\"text\" name=\"i_maker\" value=\"" + d_maker + "\">";

cell9 = "<input type =\"text\" name=\"i_kisyu\" value=\"" + d_kisyu + "\">";

cell10 = "<input type =\"text\" name=\"i_kataban\" value=\"" + d_kataban
+ "\">";

cell11 = "<input type =\"text\" name=\"i_serial\" value=\""
+ d_serial + "\">";

cell12 = "<input type =\"text\" name=\"i_seq\" value=\"" + d_seq + "\">";

//テーブル用ＨＴＭＬを作成
tableHTML += "<tr><td NOWRAP>" + cell1 + "</td>"
+ "<td NOWRAP>" + cell2 + "</td>"
+ "<td>" + cell3 + "</td>"
+ "<td>" + cell4 + "</td>"
+ "<td>" + cell5 + "</td>"
+ "<td>" + cell6 + "</td>"
+ "<td>" + cell7 + "</td>"
+ "<td>" + cell8 + "</td>"
+ "<td>" + cell9 + "</td>"
+ "<td>" + cell10 + "</td>"
+ "<td>" + cell11 + "</td>"
+ "<td>" + cell12 + "</td></tr>";
}
}
tableHTML += "</table>";



//データベースのコネクションを閉じる
db.close();

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1 Transitional//EN">

<head><title></title></head>
<body>

<p>
<b></b><br/>
<form name=form1 method="post" action = "/WebModule1/S_ZOKU_2.jsp">
<%= tableHTML %><br>
<input type="radio" name="syori" value="s1" ID="s1"
checked="checked"><LABEL FOR="s1">修正 </LABEL><br>
<input type="radio" name="syori" value="s2" ID="s2"><LABEL FOR="s2">削除
</LABEL><br><br>
<input type ="submit" value="実行"> <br><br>

</form>

<script type="text/javascript">
//所属を初期化する
document.form1.i_syozoku.length = 25;
document.form1.i_syozoku.options[1].text = "○事業所";
document.form1.i_syozoku.options[1].value = "○事業所";
document.form1.i_syozoku.options[2].text = "×事業所";
document.form1.i_syozoku.options[2].value = "×事業所";
</script>

<script type="text/javascript">

function Rdp(){ // Rdp 所属が選択されたら課内容を変更する
//課一覧を所属に合わせて変更
document.form1.i_ka.length = 15;
var n = document.form1.i_syozoku.selectedIndex //所属選択位置を代入

switch (n) {
case 1: //○なら
document.form1.i_ka.options[0].text = "総務課";
document.form1.i_ka.options[0].value = "総務課";
document.form1.i_ka.options[1].text = "営業課";
document.form1.i_ka.options[1].value = "営業課";
document.form1.i_ka.options[2].text = "化学課";
document.form1.i_ka.options[2].value = "化学課";
break;
case 2: //×なら
document.form1.i_ka.options[0].text = "総務課";
document.form1.i_ka.options[0].value = "総務課";
document.form1.i_ka.options[1].text = "営業課";
document.form1.i_ka.options[1].value = "営業課";
document.form1.i_ka.options[2].text = "化学課";
document.form1.i_ka.options[2].value = "化学課";
document.form1.i_ka.options[3].text = "技術課";
document.form1.i_ka.options[3].value = "技術課";
break;
}
}

function Hdp(){ // Hdp
// alert("(無処理)");
}
</script>
*---------------------------------------------------------*
以上です。
よろしくお願いいたします。

[ メッセージ編集済み 編集者: 見習開発者 編集日時 2004-09-16 16:30 ]

[ メッセージ編集済み 編集者: 見習開発者 編集日時 2004-09-16 16:44 ]

[ メッセージ編集済み 編集者: 見習開発者 編集日時 2004-09-16 16:48 ]
えんぞ@？
ぬし
会議室デビュー日: 2004/07/06
投稿数: 271
お住まい・勤務地: はまっこ
投稿日時: 2004-09-16 16:37
質問する前に
　　○○事業所
　　××事業所
と、したほうがいいです！！
（「編集」から原文なおしたほうが）
見習開発者
会議室デビュー日: 2004/09/16
投稿数: 4
投稿日時: 2004-09-16 16:46
えんぞ@見習様、ご指摘ありがとうございます。
初めてのことで気が付きませんでした。
常識ですよね、失礼しました。
aa
ぬし
会議室デビュー日: 2004/01/08
投稿数: 299
投稿日時: 2004-09-16 23:22
ちょっとソースを読むのが面倒なので眺めただけですが、
１つめの選択肢を選択後にpost(or get)させて、２つめの選択肢をＤＢ検索して表示させるやり方と、あらかじめ両方とも用意しておいてinnerHTMLを使って切り替えるやり方があります。

いずれの方式を使うのかはケースバイケースでしょうが、
jspはひとまずおいといて、htmlでそれができますでしょうか？
もしそれができるのであれば、そのソースをはき出すjspを書けばよいだけです。
えんぞ@？
ぬし
会議室デビュー日: 2004/07/06
投稿数: 271
お住まい・勤務地: はまっこ
投稿日時: 2004-09-17 09:19
悩んでいる意味を理解するのに...だったのですが、
「所属/課/氏名...」等の行を複数行出力させた場合に、
「プルダウンが機能しない」ということなのですよね。

まず複数行出力されるHTML文が間違っています。
SELECTタグやInputタグのName属性は一意となる名前にしな
ければなりません。
１行の場合であれば問題ありませんが、複数行の場合は名前が
これでは一意になりません。
よってこれではJavaScriptの機能しません。
見習開発者
会議室デビュー日: 2004/09/16
投稿数: 4
投稿日時: 2004-09-17 15:14
aa様、えんぞ@見習様、アドバイスありがとうございます。
まず、SELECTタグやInputタグのName属性は一意となる名前にするのはforで使用しているｉの値を付け足してすることができましたが、これだと、下のほうで記述するプルダウンの値も、
一意にした名前の分だけ必要になるということですよね？
ということはテーブルでプルダウンを使うことは無理ということになるのでしょうか？
また、ａａ様の方法はちょっとイメージがわかないのですが（すいません、この前始めたばかりの初心者なので）、同じような理由で無理のような気がしますが、解決策はありますでしようか？
taro
ぬし
会議室デビュー日: 2003/10/20
投稿数: 316
投稿日時: 2004-09-17 15:42
最初のコードのまま（一意の名前を使用する）でしたら、初期化はこんな感じで。
コード:
<script type="text/javascript"> 
//所属を初期化する 
var i=0;
for(i=0; i<document.form1.i_syozoku.length;i++){
document.form1.i_syozoku[i].options.length = 25; 
document.form1.i_syozoku[i].options[1].text = "○事業所"; 
document.form1.i_syozoku[i].options[1].value = "○事業所"; 
document.form1.i_syozoku[i].options[2].text = "×事業所"; 
document.form1.i_syozoku[i].options[2].value = "×事業所"; 
}
</script>

変更時は、Scriptの引数にそのindexを渡すようにしておき、
コード:
cell1 = "<SELECT onchange=Rdp("+i+"); name=i_syozoku><OPTION value=\"" + 
d_syozoku + "\" selected> "+ d_syozoku +"　 </OPTION></SELECT>"; 

cell2 = "<SELECT onchange=Hdp(); name=i_ka><OPTION value=\"" + d_ka + 
"\" selected> " + d_ka + "　</OPTION></SELECT></DIV></TD>";

スクリプトを以下のようにすればいかがでしょう？
コード:
function Rdp(index){ // Rdp 所属が選択されたら課内容を変更する 
//課一覧を所属に合わせて変更 
document.form1.i_ka[index].options.length  = 15; 
var n = document.form1.i_syozoku[index].selectedIndex //所属選択位置を代入 
var obj = document.form1.i_ka[index];
switch (n) { 
case 1: //○なら 
obj.options[0].text = "総務課"; 
obj.options[0].value = "総務課"; 
obj.options[1].text = "営業課"; 
obj.options[1].value = "営業課"; 
obj.options[2].text = "化学課"; 
obj.options[2].value = "化学課"; 
break; 
case 2: //×なら 
obj.options[0].text = "総務課"; 
obj.options[0].value = "総務課"; 
obj.options[1].text = "営業課"; 
obj.options[1].value = "営業課"; 
obj.options[2].text = "化学課"; 
obj.options[2].value = "化学課"; 
obj.options[3].text = "技術課"; 
obj.options[3].value = "技術課"; 
break; 
} 
}


# ちなみにテーブルは全く関係ないと思うのですが･･･。
aa
ぬし
会議室デビュー日: 2004/01/08
投稿数: 299
投稿日時: 2004-09-17 21:03
引用:

また、ａａ様の方法はちょっとイメージがわかないのですが（すいません、この前始めたばかりの初心者なので）、同じような理由で無理のような気がしますが、解決策はありますでしようか？

つまり、調べる気もないし、やってみるつもりもないし、本買って勉強するつもりもないし、なんとなく無理だと思うから無理だと思うんだけど、解決策はありますか？　っていうご質問でしょうか？

はい。ございます。そんなあなたに最適な方法をいくつもご用意いたしております。

（その１）あきらめる。
（その２）やめる。
（その３）外注する。
（その４）他の人にやってもらう。
（その５）プルダウンを１つしか使わない。

・東京事業所/総務部
・東京事業所/営業部
・大阪営業所/総務部
・大阪営業所/研究部
・大阪営業所/システム部

こんな感じ。
1|2 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）