原生JS生成动态select下拉框步骤

来源：互联网发布：淘宝店铺装修网站编辑：程序博客网时间：2024/06/09 14:30

1.加载页面时，应初始化下拉框数据

<body onLoad="init()" style="width:100%; height:100%; overflow:auto" >

2.数据来源于数据库，需调用后台去查询，利用ajax异步调用，这里利用公司封装好的方法调用

function init() {var pubRes = new Array(); pubRes = callRemoteFunctionNoTrans("serviceRegionService","queryServiceRegionType");//封装好的方法可在后面带参数var srtEle  =  document.getElementById("txtSrvRegionType"); //遍历得到的数组对象,填充下拉框,js中无list类型    for(var i = 0 ;i < pubRes.length;i ++ ) {   var option  =  document.createElement("option");   var text  =  document.createTextNode(pubRes[i].descChina);   option.appendChild(text);   option.value = pubRes[i].serialNo;   srtEle.appendChild(option);        }}

3.封装的callRemoteFunctionNoTrans(...)方法,传入的参数是spring中配置的, 必须配置, 否则不行

function callRemoteFunctionNoTrans(serviceName,funcName){  var URL="/ResService/busifacadeservlet";  var doc = makeDOM();  var node = doc.createProcessingInstruction("xml","version='1.0'");  doc.appendChild(node);  node = doc.appendChild(doc.createElement("Function"));  node.setAttribute("name",funcName);  node.setAttribute("serviceName",serviceName);  for(var i=2;i<arguments.length;i++){    var elm = doc.createElement("Param");    var type = getObjectType(arguments[i]);    elm.setAttribute("type", type);    packageObject(elm, type, arguments[i]);    node.appendChild(elm);  }  //window.prompt("xml", doc.xml);  //发送到后台  var retVal;  var xmlHttp = new ActiveXObject("Microsoft.XmlHttp");  xmlHttp.open("POST", URL, false);  xmlHttp.send(doc.xml);  if(xmlHttp.status!=200){    throw new Error(0,"Network issue or remote server issue");    return;  }else retVal = xmlHttp.responseText;  //window.prompt("xml", retVal);  //xml转为object  doc = makeDOM();  try{    if(!doc.loadXML(retVal)){      throw new Error(0,"发生系统异常，请联系系统管理员！");      return;    }    node = doc.documentElement;    switch(node.tagName){      case "Output":return getObjectFromXml(node,node.getAttribute("type"));      case "Error":throw packageError(node);      default:throw new Error(0,"发生系统异常，请联系系统管理员！");    }  }  finally{    retVal = xmlHttp = node = doc = null;  }}<!--private -->function IsInt(num){  return ((num%1)==0)}function getObjectType(obj){  //n=null,b,i,f,s,d,o,a  if(obj == null) return 'n';  if(obj.constructor.toString().indexOf("Date")>0) return 'd';  if(obj.constructor.toString().indexOf("Array")>0) return 'a';  switch(obj.constructor){    case Number:      if(IsNumberInt(obj))return 'i';      elsereturn 'f';      break;    case Boolean:      return 'b';      break;    case String:      return 's';      break;    case Date:      return 'd';      break;    case Array:      return 'a';      break;    default:      return 'o';      break;  }}function packageObject(elm,type,arg){  switch(type){    case 'n':      break;    case 'b':    case 'i':    case 'l':    case 'f':    case 's':      elm.text = strEncoded(arg.toString());      break;    case 'd':      elm.text = dateToString(arg);      break;    case 'o':      for(var key in arg){var child =arg[key];var subtype = getObjectType(child);//it's empty deal to its minValue in b/i/f      //wangcc modify 201002021537 BEGINif(typeof child!="function"){//function就不要分装了var childElm = elm.ownerDocument.createElement(subtype+key);elm.appendChild(childElm);packageObject(childElm,subtype,child);      }       //wangcc modify 201002021537 END      }      break;    case 'a':      for(var i=0;i<arg.length;i++){var child =arg[i];var subtype = getObjectType(child);var childElm = elm.ownerDocument.createElement(subtype+"Item");elm.appendChild(childElm);packageObject(childElm,subtype,child);      }      break;   }}function getObjectFromXml(elm,type){  if(type==null) return null;  switch(type){    case 'n':    case 'v':      return null;    case 'b':    case 'B':      return (elm.text=="true");    case 'i':    case 'I':    case 'l':    case 'L':      var val = parseInt(elm.text);      if(isNaN(val)) throw elm.tagName+" must be an integer";      return val;    case 'f':    case 'F':      var val = parseFloat(elm.text);      if(isNaN(val)) throw elm.tagName+" must be an float";      return val;    case 's':    case 'S':      return elm.text;    case 'd':    case 'D':      try{return parseDate(elm.text);      }catch(ex){throw elm.tagName+"must be in a DateTime format(yyyy-MM-dd HH:mm:ss)";      }  case 'o':    {      var obj = new Object();      var nodes = elm.childNodes;      for(var i=0;i<nodes.length;i++){var child = nodes[i];if(child.nodeType==1){//NODE_ELEMENT  var childtype = child.tagName.charAt(0);  var key = child.tagName.substring(1);  obj[key] = getObjectFromXml(child,childtype);}      }      return  obj;    }  case 'a':    {      var arr = new Array();      var nodes = elm.childNodes;      for(var i=0;i<nodes.length;i++){var child = nodes[i];if(child.nodeType==1){//NODE_ELEMENT  var childtype = child.tagName.charAt(0);  var key = child.tagName.substring(1);  if(key=="Item"){    arr[arr.length] = getObjectFromXml(child,childtype);  }}      }      return arr;    }  default:    throw "type '"+ type +"' can't be recognized";  }}function parseDate(str){  var arrDate = str.split(/[\/\-: ]/);  if(arrDate.length<6) throw "Invalid DateTime format";  var d = new Date(arrDate[0],parseInt(arrDate[1]-1),arrDate[2],arrDate[3],arrDate[4],arrDate[5]);  if(isNaN(d))    throw "Invalid DateTime format";  return d;}function parseDateStr(str){  var yearStr =  str.substring(0,4);  var monthStr  = str.substring(5,7);  var dayStr  =  str.substring(8,10);  var dDay = new Date(yearStr,monthStr-1,dayStr);   return dDay;}function dateToString(d){  return d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();}/*  特殊字符编码 */function strEncoded(str){  if(str!=null){    //str = str.replace("\"", dq);    //str = str.replace(/'/g, "’");    //str = str.replace(/"/g, "”");    //str = str.replace("\\", tq);    //str = str.replace("=", eq);    //str = str.replace(/</g, "＜");    //str = str.replace(/>/g, "＞");    //str = str.replace(/&/g, "＆");  }else{    str="";  }  return str;}

function StrEnCode(s){  return (s)? s.replace(/'/g, "’").replace(/"/g, "”").replace(/</g, "＜").replace(/>/g, "＞").replace(/&/g, "＆") : "";}

4.封装的servlet方法

public class BusiFacadeServlet extends HttpServlet {    /**     *      */    private static final long serialVersionUID = 1581438754814059524L;        private static Logger _logger = Logger.getLogger(BusiFacadeServlet.class);    // 字符集设置    private static final String LOCAL_CHARSET = "GBK";    /** Initialize global variables */    public void init() throws ServletException {        super.init();    }    /**     * 统一服务方法     *      * @param request     *            HttpServletRequest     * @param response     *            HttpServletResponse     * @throws ServletException     * @throws IOException     */    public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        request.setCharacterEncoding(LOCAL_CHARSET);        response.setContentType("text/html; charset=" + LOCAL_CHARSET);        Long tid = Thread.currentThread().getId();        String returnValue = null;        try {            _logger.info("[" + tid + "]service begin.....");//打印日志信息便于查bug            WebApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(this.getServletContext());            returnValue = ExecutionFactory.execute(request, response, ctx);        } catch (UOSException e) {            _logger.error(e.getError(), e);            returnValue = e.getMessage();        } finally {            _logger.debug("[" + tid + "]sreturnValue=" + returnValue);            _logger.info("[" + tid + "]service end.....");        }        PrintWriter out = response.getWriter();        out.print(returnValue);        out.close();    }    /** Clean up resources */    public void destroy() {        super.destroy();    }}

5.封装的makeDOM()方法

function makeDOM(){var o,suffixs=[".4.0",".3.0",".2.0",""];for(var i=0;i<suffixs.length;i++){try{o=new ActiveXObject("msxml2.DOMDocument"+suffixs[i]);break;}catch(ex){};}try{o.async=false;o.validateOnParse=false;o.resolveExternals=false;}catch(e){alert(e.description);}return o;}

有地方不能通过或者有缺少什么封装的方法的可以留言，这里提供了一个很好的封装就是前端js可以直接调用Spring配置的service

0 0