#Java Web累积#JS动态加载所有同name的select的option

时间:2022-10-16 12:25:38
 
项目需求:
  某一页面,页面使用多列table,每个table中有同相同的<select>,select的option不确定,根据Server端的配置来,所以option需要动态加载;

以“provServicevalueSel”为列子;
在JSP中:
一,JSP中,启动读取session:
<script type="text/javascript">
var provType2List =<%=session.getAttribute("provType_2_list") %>;
</script> .......................
<body>
.......................

  <select class="cell4_item_2 forClear" autocomplete="off" name = "provServicevalueSel"">
  </select>

........................
</body>
........................

二,检查数据:页面加载后,JS中自动启动数据检查。

    若Session中没有数据,启动数据请求;若有数据,则使用数据填充option;

window.onload=function(){

    //加载列表
loadAnalysisConfigList={
initProvServiceData:function()
{
if(provType2List && provType2List.length > 1)
{
RefreshProvValue(provType2List);
initData();
}
else
{
GetProvListByType("2");
}
}
} loadAnalysisConfigList.initProvServiceData();
}

三,填充option; 以”

//provServicevalue refrush
function RefreshProvValue(provTypeList)
{
if(!provTypeList)
{
return;
} $("select[name='provServicevalueSel']").each(function(n)
{
var provValuesel = $(this);
provValuesel.find("option").remove(); for(var i=0;i < provTypeList.length; i++)
{
provValuesel.append("<option value='"+ provTypeList[i].id+"'>"+ provTypeList[i].name +"</option>");
}
});
}

或者

function RefreshProvValue(provTypeList)
{
  if(!provTypeList)
  {
   return;
  }
  var optionList = "";
  for(var i=0;i < provTypeList.length; i++)
  {
    optionList += ("<option value='"+ provTypeList[i].id+"'>"+ provTypeList[i].name +"</option> \n");
  }

  var provSelArray = document.getElementsByName("provServicevalueSel");   
  for(var iDex = 0; iDex < provSelArray.length; iDex ++)   
  {     
    provSelArray[iDex].innerHTML = optionList;
  }
}

备注:效果是可以的,只是不知道这样写有没有什么不好,后边再巩固吧。