ajax动态下拉框的级联操作

来源：互联网发布：单片机视频教程郭天祥编辑：程序博客网时间：2024/05/16 08:24

jsp页面

<td width="7%" align="right" style="padding-top:10px;">市区代码</td><td width="10%" style="padding-top:10px;"><select class="main_select" name="headPageInfo.cityCode"id="headPageInfocityCode" onchange="changeCity(this.value)"><option value="0">--请选择--</option><s:iterator value="cityDic" status="city" id="city"><option value="<s:property value='cityCode'/>"><s:property value="cityName" /></option></s:iterator></select></td><td width="7%" align="right" style="padding-top:10px;">社区代码</td><td width="10%" style="padding-top:10px;"><select class="main_select" name="headPageInfo.belongCode"id="belongCode"><%-- <option value="0">--请选择--</option><s:iterator value="cityDic" status="city" id="city"><option value="<s:property value='cityCode'/>"><s:property value="cityName" /></option></s:iterator> --%></select></td>

js方法

//市区代码，社区代码级联function changeCity(selectedCity){//alert(selectedCity);$("#headPageInfocityCode").val(selectedCity);if(selectedCity=="0"){$("#belongCode").html("");return;}$("#belongCode").html("");var sbelongCode=$("#belongCode");sbelongCode.append('<option value="0">--请选择--</option>');//异步请求查询sbelongCode列表的方法并返回json数组  $.ajax({url : '/headpage/headpage!getBelongCode.htm',          type : 'post',          data : { citycode : selectedCity },          dataType : 'json',          success : function (opts) {              // 单选CI              if (opts && opts.length > 0) {                      var html = [];                      for (var i = 0; i < opts.length; i++) {                          html.push('<option value="'+opts[i].value+'">'+opts[i].text+'</option>');                      }                      sbelongCode.append(html.join(''));                  }              }  });}

后台方法

public void getBelongCode(){try {String citycode=this.getRequest().getParameter("citycode");List<OptionBean> list=headpageService.getBelongCodes(citycode);JSONArray array=JSONArray.fromObject(list);this.getResponse().getWriter().append(array.toString());} catch (IOException e) {e.printStackTrace();}}

注：

将list集合转成json数组时要导入import net.sf.json.JSONArray;

0 0