<select>简易的二级联动
1.首先是表单页面:
1 <tr> 2 <td align="right"> 3 <label class="Validform_label"> 4 所在区县: 5 </label> 6 </td> 7 <td class="value"> 8 <select id="atcounty" name="atcounty" style="width: 150px" onchange="getDistrict(this)"> 9 </select> 10 <span class="Validform_checktip"></span> 11 <label class="Validform_label" style="display: none;">所在区县</label> 12 </td> 13 </tr> 14 <tr> 15 <td align="right"> 16 <label class="Validform_label"> 17 所在街道: 18 </label> 19 </td> 20 <td class="value"> 21 <select id="atdistrict" name="atdistrict" style="width: 150px"> 22 </select> 23 <span class="Validform_checktip"></span> 24 <label class="Validform_label" style="display: none;">所在街道</label> 25 </td> 26 <tr>
2.js代码:
1 <script type="text/javascript"> 2 //编写自定义JS代码 3 $(document).ready(function(){ 4 getCountry(); 5 $("#atdistrict").append("<option value='-1' selected='selected'>"+"---请选择---"+"</option>"); 6 }); 7 function getCountry(){ 8 $.ajax({ 9 type: 'post', 10 url : 'hAqscTieupsummaryController.do?getBJCountry', 11 async: true, 12 dataType: "json", 13 success: function(data) { 14 for(var key in data){ 15 if (key==0) { 16 $("#atcounty").append("<option value='-1' selected='selected'>"+"---请选择---"+"</option>"); 17 $("#atcounty").append("<option value='"+data[key].countrycode+"'>"+data[key].countryname+"</option>"); 18 }else{ 19 $("#atcounty").append("<option value='"+data[key].countrycode+"'>"+data[key].countryname+"</option>"); 20 } 21 } 22 } 23 }); 24 } 25 function getDistrict(obj){ 26 $("#atdistrict").empty(); //清空二级下拉框,否则会叠加 27 $("#atdistrict").append("<option value='-1' selected='selected'>"+"---请选择---"+"</option>"); 28 var id = obj.id; 29 var options=$("#"+id+" option:selected"); //获取选中的项 30 alert(options.text()); //拿到选中项的值 31 var countrycode = options.val(); 32 alert(countrycode); 33 $.ajax({ 34 type:"post", 35 url:'hAqscTieupsummaryController.do?getStreet', 36 dataType:'json', 37 data:{countrycode:countrycode}, 38 success:function(data){ 39 for(var key in data){ 40 if (key==0) { 41 //$("#atdistrict").append("<option value='-1' selected='selected'>"+"---请选择---"+"</option>"); 42 $("#atdistrict").append("<option value='"+data[key].countrycode+"'>"+data[key].countryname+"</option>"); 43 }else{ 44 $("#atdistrict").append("<option value='"+data[key].countrycode+"'>"+data[key].countryname+"</option>"); 45 } 46 } 47 } 48 }); 49 } 50 </script>
3.java后台代码(SpringMvc):
1 /** 2 * 区县 3 * @param request 4 * @return 5 */ 6 @RequestMapping(params="getBJCountry") 7 @ResponseBody 8 public List<BjcountryEntity> getBJCountry(HttpServletRequest request){ 9 List<BjcountryEntity> countrys = dao.getCountry(); 10 return countrys; 11 } 12 /** 13 * 街道 14 * @param request 15 * @return 16 */ 17 @RequestMapping(params="getStreet") 18 @ResponseBody 19 public List<BjcountryEntity> getStreet(HttpServletRequest request){ 20 String id = request.getParameter("countrycode"); 21 if (id!="") { 22 String code = id.substring(0, 6); 23 String sql = "from BjcountryEntity t0 where countrycode not like '110%000000' and countrycode like '"+code+"%' order by ordercode"; 24 @SuppressWarnings("unchecked") 25 List<BjcountryEntity> streets = comDao.findHql(sql); 26 return streets; 27 } 28 return null; 29 }
4.entity实体类:
1 package com.towery.thermal.tieup.entity; 2 3 import java.math.BigDecimal; 4 import java.util.Date; 5 import java.lang.String; 6 import java.lang.Double; 7 import java.lang.Integer; 8 import java.math.BigDecimal; 9 import javax.xml.soap.Text; 10 import java.sql.Blob; 11 import javax.persistence.Column; 12 import javax.persistence.Entity; 13 import javax.persistence.GeneratedValue; 14 import javax.persistence.GenerationType; 15 import javax.persistence.Id; 16 import javax.persistence.Table; 17 import org.hibernate.annotations.GenericGenerator; 18 import javax.persistence.SequenceGenerator; 19 import org.jeecgframework.poi.excel.annotation.Excel; 20 21 /** 22 * @Title: Entity 23 * @Description: 曲线表 24 * @author onlineGenerator 25 * @date 2018-01-16 12:52:46 26 * @version V1.0 27 * 28 */ 29 @Entity 30 @Table(name = "BJCountry", schema = "") 31 @SuppressWarnings("serial") 32 public class BjcountryEntity implements java.io.Serializable { 33 /**主键*/ 34 private java.lang.String id; 35 /**创建人名称*/ 36 private java.lang.String createName; 37 /**创建人登录名称*/ 38 private java.lang.String createBy; 39 /**创建日期*/ 40 private java.util.Date createDate; 41 /**更新人名称*/ 42 private java.lang.String updateName; 43 /**更新人登录名称*/ 44 private java.lang.String updateBy; 45 /**更新日期*/ 46 private java.util.Date updateDate; 47 /**所属部门*/ 48 private java.lang.String sysOrgCode; 49 /**所属公司*/ 50 private java.lang.String sysCompanyCode; 51 /**流程状态*/ 52 private java.lang.String bpmStatus; 53 /**区县名称*/ 54 @Excel(name="区县名称") 55 private java.lang.String countryname; 56 /**区县编码*/ 57 @Excel(name="区县编码") 58 private java.lang.String countrycode; 59 /**排序字段*/ 60 @Excel(name="排序字段") 61 private java.lang.String ordercode; 62 63 /** 64 *方法: 取得java.lang.String 65 *@return: java.lang.String 主键 66 */ 67 @Id 68 @GeneratedValue(generator = "paymentableGenerator") 69 @GenericGenerator(name = "paymentableGenerator", strategy = "uuid") 70 @Column(name ="ID",nullable=false,length=36) 71 public java.lang.String getId(){ 72 return this.id; 73 } 74 75 /** 76 *方法: 设置java.lang.String 77 *@param: java.lang.String 主键 78 */ 79 public void setId(java.lang.String id){ 80 this.id = id; 81 } 82 /** 83 *方法: 取得java.lang.String 84 *@return: java.lang.String 创建人名称 85 */ 86 @Column(name ="CREATE_NAME",nullable=true,length=50) 87 public java.lang.String getCreateName(){ 88 return this.createName; 89 } 90 91 /** 92 *方法: 设置java.lang.String 93 *@param: java.lang.String 创建人名称 94 */ 95 public void setCreateName(java.lang.String createName){ 96 this.createName = createName; 97 } 98 /** 99 *方法: 取得java.lang.String 100 *@return: java.lang.String 创建人登录名称 101 */ 102 @Column(name ="CREATE_BY",nullable=true,length=50) 103 public java.lang.String getCreateBy(){ 104 return this.createBy; 105 } 106 107 /** 108 *方法: 设置java.lang.String 109 *@param: java.lang.String 创建人登录名称 110 */ 111 public void setCreateBy(java.lang.String createBy){ 112 this.createBy = createBy; 113 } 114 /** 115 *方法: 取得java.util.Date 116 *@return: java.util.Date 创建日期 117 */ 118 @Column(name ="CREATE_DATE",nullable=true,length=20) 119 public java.util.Date getCreateDate(){ 120 return this.createDate; 121 } 122 123 /** 124 *方法: 设置java.util.Date 125 *@param: java.util.Date 创建日期 126 */ 127 public void setCreateDate(java.util.Date createDate){ 128 this.createDate = createDate; 129 } 130 /** 131 *方法: 取得java.lang.String 132 *@return: java.lang.String 更新人名称 133 */ 134 @Column(name ="UPDATE_NAME",nullable=true,length=50) 135 public java.lang.String getUpdateName(){ 136 return this.updateName; 137 } 138 139 /** 140 *方法: 设置java.lang.String 141 *@param: java.lang.String 更新人名称 142 */ 143 public void setUpdateName(java.lang.String updateName){ 144 this.updateName = updateName; 145 } 146 /** 147 *方法: 取得java.lang.String 148 *@return: java.lang.String 更新人登录名称 149 */ 150 @Column(name ="UPDATE_BY",nullable=true,length=50) 151 public java.lang.String getUpdateBy(){ 152 return this.updateBy; 153 } 154 155 /** 156 *方法: 设置java.lang.String 157 *@param: java.lang.String 更新人登录名称 158 */ 159 public void setUpdateBy(java.lang.String updateBy){ 160 this.updateBy = updateBy; 161 } 162 /** 163 *方法: 取得java.util.Date 164 *@return: java.util.Date 更新日期 165 */ 166 @Column(name ="UPDATE_DATE",nullable=true,length=20) 167 public java.util.Date getUpdateDate(){ 168 return this.updateDate; 169 } 170 171 /** 172 *方法: 设置java.util.Date 173 *@param: java.util.Date 更新日期 174 */ 175 public void setUpdateDate(java.util.Date updateDate){ 176 this.updateDate = updateDate; 177 } 178 /** 179 *方法: 取得java.lang.String 180 *@return: java.lang.String 所属部门 181 */ 182 @Column(name ="SYS_ORG_CODE",nullable=true,length=50) 183 public java.lang.String getSysOrgCode(){ 184 return this.sysOrgCode; 185 } 186 187 /** 188 *方法: 设置java.lang.String 189 *@param: java.lang.String 所属部门 190 */ 191 public void setSysOrgCode(java.lang.String sysOrgCode){ 192 this.sysOrgCode = sysOrgCode; 193 } 194 /** 195 *方法: 取得java.lang.String 196 *@return: java.lang.String 所属公司 197 */ 198 @Column(name ="SYS_COMPANY_CODE",nullable=true,length=50) 199 public java.lang.String getSysCompanyCode(){ 200 return this.sysCompanyCode; 201 } 202 203 /** 204 *方法: 设置java.lang.String 205 *@param: java.lang.String 所属公司 206 */ 207 public void setSysCompanyCode(java.lang.String sysCompanyCode){ 208 this.sysCompanyCode = sysCompanyCode; 209 } 210 /** 211 *方法: 取得java.lang.String 212 *@return: java.lang.String 流程状态 213 */ 214 @Column(name ="BPM_STATUS",nullable=true,length=32) 215 public java.lang.String getBpmStatus(){ 216 return this.bpmStatus; 217 } 218 219 /** 220 *方法: 设置java.lang.String 221 *@param: java.lang.String 流程状态 222 */ 223 public void setBpmStatus(java.lang.String bpmStatus){ 224 this.bpmStatus = bpmStatus; 225 } 226 /** 227 *方法: 取得java.lang.String 228 *@return: java.lang.String 区县名称 229 */ 230 @Column(name ="COUNTRYNAME",nullable=true,length=50) 231 public java.lang.String getCountryname(){ 232 return this.countryname; 233 } 234 235 /** 236 *方法: 设置java.lang.String 237 *@param: java.lang.String 区县名称 238 */ 239 public void setCountryname(java.lang.String countryname){ 240 this.countryname = countryname; 241 } 242 /** 243 *方法: 取得java.lang.String 244 *@return: java.lang.String 区县编码 245 */ 246 @Column(name ="COUNTRYCODE",nullable=true,length=50) 247 public java.lang.String getCountrycode(){ 248 return this.countrycode; 249 } 250 251 /** 252 *方法: 设置java.lang.String 253 *@param: java.lang.String 区县编码 254 */ 255 public void setCountrycode(java.lang.String countrycode){ 256 this.countrycode = countrycode; 257 } 258 /** 259 *方法: 取得java.lang.String 260 *@return: java.lang.String 排序字段 261 */ 262 @Column(name ="ORDERCODE",nullable=true,length=32) 263 public java.lang.String getOrdercode(){ 264 return this.ordercode; 265 } 266 267 /** 268 *方法: 设置java.lang.String 269 *@param: java.lang.String 排序字段 270 */ 271 public void setOrdercode(java.lang.String ordercode){ 272 this.ordercode = ordercode; 273 } 274 }
5.数据库数据结构:
6.效果图: