- PR -

リストボックスとテキストボックスの連動について

1
投稿者投稿内容
まな
常連さん
会議室デビュー日: 2005/10/26
投稿数: 45
投稿日時: 2005-10-26 15:41
STRUTSで開発しています。初心者で、とても困っています。
データベースから、名前を持ってくるリストボックス(名前name・・・<html:optionsCollection name="nameAtbt">)と、そのリストボックスと連動するデータを表示する
テキスト１(誕生日birth)とテキスト２(年齢tosi)があります。

以下私が作成したJSPとjavaです。
＊＊＊＊JSP＊＊＊＊＊
<script language="javascript" type="text/javascript">
　function setBondCpnyItems(birthday,tosi) {

document.getElementById("birthday").value = birthday;
document.getElementById("tosi").value = tosi;

}
function setSrhData() {

window.top.setBondCpnyItems('<bean:write name="UsrForm" property="birthday" />',
'<bean:write name="UsrForm" property="tosi" />');
}
</script>

//リストボックス・・・名前
<th class="title_large"><span class="underline">名前</span></th>
<td colspan="3">
<html:select property="name" styleClass="required" style="width:95px;" onblur="srhBondCpny();" onchange="setBondCpnyItems(this)" >
<html:optionsCollection name="nameAtbt" label="label" value="value" />
</html:select>
//テキスト１・・誕生日
<html:text property="birthday" styleClass="readonly" readonly="true" size="30" maxlength="15" tabindex="-1" />
//テキスト２・・年齢
<html:text property="tosi" styleClass="readonly" size="2" maxlength="2" readonly="true" tabindex="-1" />
</td>

＊＊＊＊UsrForm＊＊＊＊＊

private String name;
private String birthday;
private String tosi;

public String getName() {
return Name;
}
public String getBirthday() {
return keyAcntCtgry;
}
public String getTosi() {
return tosi;
}

public void setName(String string) {
Name = string;
}
public void setBirthday(String string) {
birthday = string;
}
public void setTosi(String string) {
tosi = string;
}

リストボックスを動作させると、テキスト１・・・[object]
テキスト２・・undefinedと表示されてしまいます。

正しく値を取る方法を教えてください。
よろしくお願いします。
takashi
ベテラン
会議室デビュー日: 2004/02/12
投稿数: 79
お住まい・勤務地: 東京
投稿日時: 2005-10-26 16:10
こんにちは。

えーと、
JSP中に
①onchange="setBondCpnyItems(this)"
とあるのに
JavaScriptの関数定義は
②function setBondCpnyItems(birthday,tosi)
という風に引数が異なってますね。

なので、②の関数中で
document.getElementById("birthday").value = birthday;
document.getElementById("tosi").value = tosi;
とすると、
birthdayには①で渡されたthis(たぶんdocument.formオブジェクト？）が
入ってることになります。

ですので、
①の関数呼び出しでちゃんとbirthdayとtosiを渡してあげるか、
②の関数の中でthisからbirthdayとtosiを取り出すかどちらかになるように
すればうまくいくと思います。

_________________
3年目PG（そろそろSE？）

Σ(ﾟдﾟ;) ハッ!?　　ベテランに昇格してる･･･
uk
ぬし
会議室デビュー日: 2003/05/20
投稿数: 1155
お住まい・勤務地: 東京都
投稿日時: 2005-10-26 16:20
これはJavaではなくてjavascriptの問題ですね。

setBondCpnyItemsは二つ引数を取っているのに渡しているのはthis、つまりリストボックス
オブジェクトだけ。結果としてbirthdayにはリストボックスオブジェクトが渡っているので
[object]と表示され、tosiには何も渡っていないのでundefinedと表示されています。
＃ところで英語とローマ字が混ざっているのって気持ち悪くないですか?

ご希望の動作をさせるのは、難しくはないのですが実はちょっとめんどくさいです。
誕生日と年齢をjavascriptの配列に入れておき、リストボックスの選択されたインデックスに
該当するデータをその配列から取り出して表示させる、という動作になります。

サーバ側の動作とクライアント側の動作がごっちゃになっているようですので、まずそこを
区別しましょう。
まな
常連さん
会議室デビュー日: 2005/10/26
投稿数: 45
投稿日時: 2005-10-26 17:14
takashiさんukさん返信ありがとうございました！
参考になりました！
配列を使ったjavascriptのサンプルを載せていただくと幸いです・・


takashi
ベテラン
会議室デビュー日: 2004/02/12
投稿数: 79
お住まい・勤務地: 東京
投稿日時: 2005-10-26 17:38
サンプルはいま時間がないので他の方にお譲りするとして･･･ｗ

JavaScriptの基本部分を少し勉強するといろいろできていいかもしれませんね。
こことか結構わかりやすくておすすめです。
http://www.usagi-js.com/index.htm
http://www.tohoho-web.com/www.htm
_________________
3年目PG（そろそろSE？）

Σ(ﾟдﾟ;) ハッ!?　　ベテランに昇格してる･･･
まな
常連さん
会議室デビュー日: 2005/10/26
投稿数: 45
投稿日時: 2005-10-26 20:41
takashiさんわかりやすいサイトを教えていただきありがとうございます。


たびたびすみません・・・

配列を使ったJSPを作りました。
以下ソース(一部)です。


＋＋＋＋JSP＋＋＋＋＋＋＋＋＋
<script language="javascript" type="text/javascript">
function tekitou(i) {
document.form.birthday.value = document.form.birthday.options[i].value;
document.form.tosi.value = document.form.tosi.options[i].value;
}

</script>


<tr>//リストボックス・・・名前
<th class="title_large"><span class="underline">会社コード</span></th>
<td colspan="3">
<html:select property="name" styleClass="required" style="width:95px;" onblur="srhBondCpny();" onchange="setBondCpnyItems(this)" >
<html:optionsCollection name="nameAtbt" label="label" value="value" />
</html:select>

　　　//テキスト１・・誕生日
<html:text property="birthday" styleClass="readonly" readonly="true" size="30" maxlength="15" tabindex="-1" />
//テキスト２・・年齢
<html:text property="tosi" styleClass="readonly" size="2" maxlength="2" readonly="true" tabindex="-1" />


　　//★名前と番号のセレクトボックス(style="display:none;")
<span style="display:none;">
<html:select property="birthday">
<html:options collection="bondCpny1CdAtbt" property="value" labelProperty="label" />
</html:select>
<html:select property="tosi">
<html:options collection="bondCpny2CdAtbt" property="value" labelProperty="label" />
</html:select>
</span>

変更点は、javascriptを配列を使用した点と、//★名前と番号のセレクトボックス(style="display:none;")隠れセレクトボックスの追加(誕生日、年齢)
です。
HTMLだと実行出来るのですが、strutsだとjavascriptのエラーになってしまいます。
style="display:none;"で隠したセレクトボックスと、表示するためのテキストボックスのpropertyの名前が同じだからエラーが出るのでしょうか？

1

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