zoukankan      html  css  js  c++  java
  • #Java Web累积#JS动态加载所有同name的select的option

     
    项目需求:
      某一页面,页面使用多列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> ");
      }

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

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

  • 相关阅读:
    Bash
    FireDAC
    忽然看到字符汉字特殊字符在计算机中的存储方式
    Windows环境下使用Nginx搭建负载均衡
    Session跨域、Session共享、Mode=StateSever方式解决问题
    原生Js在各大浏览器上、火狐、ie、谷歌、360等出现的不兼容问题。
    Sina 新浪Ip归属地Api 很好用的,使用get请求
    前端页面使用 Json对象与Json字符串之间的互相转换
    使用bootstrap 弹出效果演示
    Mvc自定义路由让支持.html的格式
  • 原文地址:https://www.cnblogs.com/Sanje3000/p/6587555.html
Copyright © 2011-2022 走看看