Jquery 三级联动

发布时间：2020-05-27 15:25:58 阅读：1891 作者：zhangminonly 栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

<script type="text/javascript">         $(function(){              linkage.init('state','country','city');              linkage.init('state1','country1','city1');          });      </script>   </head>       <body >     出发地:      <select id="state"></select>&nbsp;      <select id="country"></select>&nbsp;      <select id="city"></select>     <br>     到达地:      <select id="state1"></select>&nbsp;      <select id="country1"></select>&nbsp;      <select id="city1"></select>   </body>

function linkage(){}   $(function(){      //linkage.init("state","country","city");  });    linkage.init = function(levelOne, levelTwo, levelThree){       linkage.data = [];       levelOne = "#" + levelOne;      levelTwo = "#" + levelTwo;      levelThree = "#" + levelThree;      var html = "";      var url = "linkage.action";//访问地址            //JQuery访问数据      $.getJSON(url, function(data){          linkage.data = data;                    $(levelOne).html(linkage.getOptionHtmlByLevel(1));//洲区域信息          $(levelTwo).html(linkage.getOptionHtmlById($(levelOne).val()));//国家信息          $(levelThree).html(linkage.getOptionHtmlById($(levelTwo).val()));//城市信息                    // 为下拉levelOne框绑定onchange事件          $(levelOne).change(function(){              $(levelTwo).html(linkage.getOptionHtmlById($(levelOne).val()));//国家信息              $(levelThree).html(linkage.getOptionHtmlById($(levelTwo).val()));//城市信息          });          // 为下拉levelTwo框绑定onchange事件          $(levelTwo).change(function(){              $(levelThree).html(linkage.getOptionHtmlById($(levelTwo).val()));//城市信息          });                });  };   /**   * 获得下拉框的选项html   * @param data    * @return html   */ linkage.getOptionHtml = function(data){      var html = "";            html = "<option value="+data.id+">" + data.locationName + "</option>";            return html;  };   /**   * 根据副ID查找数据   * @param subId    * @return html   */ linkage.getOptionHtmlById = function(subId){      var html = "";      for(i = 0 ; i < linkage.data.length ; i++){          if(linkage.data[i].subId == subId){              html += linkage.getOptionHtml(linkage.data[i]);          }      }            return html;  };   /**   * 根据区域级别查找数据   * @param level   * @return html   */ linkage.getOptionHtmlByLevel = function(level){      var html = "";            for(i = 0 ; i < linkage.data.length ; i++){          if(linkage.data[i].locationLevel == level){              html += linkage.getOptionHtml(linkage.data[i]);          }      }            return html;  };

public void getAllLocationInfo(){                    List<LocationBean> locationList = this.linkageService.findAllLocation();                                        HttpServletResponse response = (HttpServletResponse)ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);          HttpServletRequest request = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);          try {                            request.setCharacterEncoding("utf-8");              response.setCharacterEncoding("utf-8");              JSONArray json = JSONArray.fromObject(locationList);              response.getWriter().write(json.toString());          } catch (IOException e) {              // TODO Auto-generated catch block              e.printStackTrace();          }      }

注意：此用到了JSON转换包

jar包：json-lib-0.4.jar,commons-beanutils.jar

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

Jquery 三级联动

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签