2000年3月30日星期四

選択肢を動的に生成

// JavaBeanを導入
<jsp:useBean id="DataList" class="test.EmployeeList" scope="session" />

<script type="text/javascript">

// JavaBean情報からJavaScript配列生成
var aryData = new Array();

<%
for(int i=0;i<DataList.getCount();i++){
 out.print("aryData["+i+"] = new Array(\"");
 out.print(DataList.Data(i).getEmpNO());
 out.print("\", \"");
 out.print(DataList.Data(i).getEmpName());
 out.println("\");");
}
%>

// 「選択」肢を配列にセット
function addSelOption(selObj, myValue, myText)
{
 selObj.length++;
 selObj.options[selObj.length - 1].value = myValue;
 selObj.options[selObj.length - 1].text  = myText;
}

//「ProjectCode」を変わる時「履歴」選択肢を動的に生成
function changePJ (obj,selObj)
{
 selObj.length = 0;
 addSelOption (selObj,"","選択..."); // 「履歴」デフォルト選択肢の生成

 // 「ProjectCode」を再度 "選択..." に戻した時の不具合修正
 if (obj.value == "")
 {
  return; 
 }
 
 //「履歴」選択肢を動的に生成
 for(var index = 0; index < aryData.length; index++){
  var itmeKey = aryData[index][0];
  var itemVal = aryData[index][1];
  
  addSelOption (selObj, itmeKey, itemVal);
 }
}
</script>


<form name="mf"  id="main_form" method="POST">
 //「ProjectCode」選択肢
 <select id="pj" name="pj" onChange="changePJ(this,mf.history);">
  <option value="">選択...</option>
 </select>

 //「履歴」選択肢
 <select id="history" name="history">
  <option value="">選択...</option>
 </select>
</form>

没有评论:

发表评论