<select>简易的二级联动
1.首先是表单页面：
<tr>
<td align="right">
<label class="Validform_label">
所在区县:
</label>
</td>
<td class="value">
<select id="atcounty" name="atcounty" style="width: 150px" onchange="getDistrict(this)">
</select>
<span class="Validform_checktip"></span>
<label class="Validform_label" style="display: none;">所在区县</label>
</td>
</tr>
<tr>
<td align="right">
<label class="Validform_label">
所在街道:
</label>
</td>
<td class="value">
<select id="atdistrict" name="atdistrict" style="width: 150px">
</select>
<span class="Validform_checktip"></span>
<label class="Validform_label" style="display: none;">所在街道</label>
</td>
<tr>
2.js代码：
<script type="text/javascript">
//编写自定义JS代码
$(document).ready(function(){
getCountry();
$("#atdistrict").append("<option value='-1' selected='selected'>"+"---请选择---"+"</option>");
});
function getCountry(){
$.ajax({
type: 'post',
url : 'hAqscTieupsummaryController.do?getBJCountry',
async: true,
dataType: "json",
success: function(data) {
for(var key in data){
if (key==0) {
$("#atcounty").append("<option value='-1' selected='selected'>"+"---请选择---"+"</option>");
$("#atcounty").append("<option value='"+data[key].countrycode+"'>"+data[key].countryname+"</option>");
}else{
$("#atcounty").append("<option value='"+data[key].countrycode+"'>"+data[key].countryname+"</option>");
}
}
}
});
}
function getDistrict(obj){
$("#atdistrict").empty(); //清空二级下拉框，否则会叠加
$("#atdistrict").append("<option value='-1' selected='selected'>"+"---请选择---"+"</option>");
var id = obj.id;
var options=$("#"+id+" option:selected"); //获取选中的项
alert(options.text()); //拿到选中项的值
var countrycode = options.val();
alert(countrycode);
$.ajax({
type:"post",
url:'hAqscTieupsummaryController.do?getStreet',
dataType:'json',
data:{countrycode:countrycode},
success:function(data){
for(var key in data){
if (key==0) {
//$("#atdistrict").append("<option value='-1' selected='selected'>"+"---请选择---"+"</option>");
$("#atdistrict").append("<option value='"+data[key].countrycode+"'>"+data[key].countryname+"</option>");
}else{
$("#atdistrict").append("<option value='"+data[key].countrycode+"'>"+data[key].countryname+"</option>");
}
}
}
});
}
</script>
3.java后台代码(SpringMvc)：
/**
* 区县
* @param request
* @return
*/
@RequestMapping(params="getBJCountry")
@ResponseBody
public List<BjcountryEntity> getBJCountry(HttpServletRequest request){
List<BjcountryEntity> countrys = dao.getCountry();
return countrys;
}
/**
* 街道
* @param request
* @return
*/
@RequestMapping(params="getStreet")
@ResponseBody
public List<BjcountryEntity> getStreet(HttpServletRequest request){
String id = request.getParameter("countrycode");
if (id!="") {
String code = id.substring(0, 6);
String sql = "from BjcountryEntity t0 where countrycode not like '110%000000' and countrycode like '"+code+"%' order by ordercode";
@SuppressWarnings("unchecked")
List<BjcountryEntity> streets = comDao.findHql(sql);
return streets;
}
return null;
}
4.entity实体类：
package com.towery.thermal.tieup.entity; import java.math.BigDecimal;
import java.util.Date;
import java.lang.String;
import java.lang.Double;
import java.lang.Integer;
import java.math.BigDecimal;
import javax.xml.soap.Text;
import java.sql.Blob;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import org.hibernate.annotations.GenericGenerator;
import javax.persistence.SequenceGenerator;
import org.jeecgframework.poi.excel.annotation.Excel; /**
* @Title: Entity
* @Description: 曲线表
* @author onlineGenerator
* @date 2018-01-16 12:52:46
* @version V1.0
*
*/
@Entity
@Table(name = "BJCountry", schema = "")
@SuppressWarnings("serial")
public class BjcountryEntity implements java.io.Serializable {
/**主键*/
private java.lang.String id;
/**创建人名称*/
private java.lang.String createName;
/**创建人登录名称*/
private java.lang.String createBy;
/**创建日期*/
private java.util.Date createDate;
/**更新人名称*/
private java.lang.String updateName;
/**更新人登录名称*/
private java.lang.String updateBy;
/**更新日期*/
private java.util.Date updateDate;
/**所属部门*/
private java.lang.String sysOrgCode;
/**所属公司*/
private java.lang.String sysCompanyCode;
/**流程状态*/
private java.lang.String bpmStatus;
/**区县名称*/
@Excel(name="区县名称")
private java.lang.String countryname;
/**区县编码*/
@Excel(name="区县编码")
private java.lang.String countrycode;
/**排序字段*/
@Excel(name="排序字段")
private java.lang.String ordercode; /**
*方法: 取得java.lang.String
*@return: java.lang.String 主键
*/
@Id
@GeneratedValue(generator = "paymentableGenerator")
@GenericGenerator(name = "paymentableGenerator", strategy = "uuid")
@Column(name ="ID",nullable=false,length=36)
public java.lang.String getId(){
return this.id;
} /**
*方法: 设置java.lang.String
*@param: java.lang.String 主键
*/
public void setId(java.lang.String id){
this.id = id;
}
/**
*方法: 取得java.lang.String
*@return: java.lang.String 创建人名称
*/
@Column(name ="CREATE_NAME",nullable=true,length=50)
public java.lang.String getCreateName(){
return this.createName;
} /**
*方法: 设置java.lang.String
*@param: java.lang.String 创建人名称
*/
public void setCreateName(java.lang.String createName){
this.createName = createName;
}
/**
*方法: 取得java.lang.String
*@return: java.lang.String 创建人登录名称
*/
@Column(name ="CREATE_BY",nullable=true,length=50)
public java.lang.String getCreateBy(){
return this.createBy;
} /**
*方法: 设置java.lang.String
*@param: java.lang.String 创建人登录名称
*/
public void setCreateBy(java.lang.String createBy){
this.createBy = createBy;
}
/**
*方法: 取得java.util.Date
*@return: java.util.Date 创建日期
*/
@Column(name ="CREATE_DATE",nullable=true,length=20)
public java.util.Date getCreateDate(){
return this.createDate;
} /**
*方法: 设置java.util.Date
*@param: java.util.Date 创建日期
*/
public void setCreateDate(java.util.Date createDate){
this.createDate = createDate;
}
/**
*方法: 取得java.lang.String
*@return: java.lang.String 更新人名称
*/
@Column(name ="UPDATE_NAME",nullable=true,length=50)
public java.lang.String getUpdateName(){
return this.updateName;
} /**
*方法: 设置java.lang.String
*@param: java.lang.String 更新人名称
*/
public void setUpdateName(java.lang.String updateName){
this.updateName = updateName;
}
/**
*方法: 取得java.lang.String
*@return: java.lang.String 更新人登录名称
*/
@Column(name ="UPDATE_BY",nullable=true,length=50)
public java.lang.String getUpdateBy(){
return this.updateBy;
} /**
*方法: 设置java.lang.String
*@param: java.lang.String 更新人登录名称
*/
public void setUpdateBy(java.lang.String updateBy){
this.updateBy = updateBy;
}
/**
*方法: 取得java.util.Date
*@return: java.util.Date 更新日期
*/
@Column(name ="UPDATE_DATE",nullable=true,length=20)
public java.util.Date getUpdateDate(){
return this.updateDate;
} /**
*方法: 设置java.util.Date
*@param: java.util.Date 更新日期
*/
public void setUpdateDate(java.util.Date updateDate){
this.updateDate = updateDate;
}
/**
*方法: 取得java.lang.String
*@return: java.lang.String 所属部门
*/
@Column(name ="SYS_ORG_CODE",nullable=true,length=50)
public java.lang.String getSysOrgCode(){
return this.sysOrgCode;
} /**
*方法: 设置java.lang.String
*@param: java.lang.String 所属部门
*/
public void setSysOrgCode(java.lang.String sysOrgCode){
this.sysOrgCode = sysOrgCode;
}
/**
*方法: 取得java.lang.String
*@return: java.lang.String 所属公司
*/
@Column(name ="SYS_COMPANY_CODE",nullable=true,length=50)
public java.lang.String getSysCompanyCode(){
return this.sysCompanyCode;
} /**
*方法: 设置java.lang.String
*@param: java.lang.String 所属公司
*/
public void setSysCompanyCode(java.lang.String sysCompanyCode){
this.sysCompanyCode = sysCompanyCode;
}
/**
*方法: 取得java.lang.String
*@return: java.lang.String 流程状态
*/
@Column(name ="BPM_STATUS",nullable=true,length=32)
public java.lang.String getBpmStatus(){
return this.bpmStatus;
} /**
*方法: 设置java.lang.String
*@param: java.lang.String 流程状态
*/
public void setBpmStatus(java.lang.String bpmStatus){
this.bpmStatus = bpmStatus;
}
/**
*方法: 取得java.lang.String
*@return: java.lang.String 区县名称
*/
@Column(name ="COUNTRYNAME",nullable=true,length=50)
public java.lang.String getCountryname(){
return this.countryname;
} /**
*方法: 设置java.lang.String
*@param: java.lang.String 区县名称
*/
public void setCountryname(java.lang.String countryname){
this.countryname = countryname;
}
/**
*方法: 取得java.lang.String
*@return: java.lang.String 区县编码
*/
@Column(name ="COUNTRYCODE",nullable=true,length=50)
public java.lang.String getCountrycode(){
return this.countrycode;
} /**
*方法: 设置java.lang.String
*@param: java.lang.String 区县编码
*/
public void setCountrycode(java.lang.String countrycode){
this.countrycode = countrycode;
}
/**
*方法: 取得java.lang.String
*@return: java.lang.String 排序字段
*/
@Column(name ="ORDERCODE",nullable=true,length=32)
public java.lang.String getOrdercode(){
return this.ordercode;
} /**
*方法: 设置java.lang.String
*@param: java.lang.String 排序字段
*/
public void setOrdercode(java.lang.String ordercode){
this.ordercode = ordercode;
}
}
5.数据库数据结构：
6.效果图：
<select>简易的二级联动的更多相关文章
- 如何用jstl的select标签做二级联动下拉列表框？？
下拉列表框的多级联动早就会了.但是用jstl的select标签做下拉列表框的做二级联动的时候还是遇到了些问题.主要问题在用Ajax查询到的数据如何拼成下拉选项的时候.其实很简单,但我还是折腾了好久.所 ...
- Select标签下拉列表二级联动级联
首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...
- select菜单实现二级联动
<tr> <th>执行人<b>*</b></th> <td> <select name="jdcld.ZXDW& ...
- select标签实现二级联动
效果如下图所示: 实现的原理:使用onchange事件,原理见代码 html代码: <select id="select" class="sel"> ...
- jquery书写一个简易的二级联动
先用php生成一个json数组示例如下 JSON_UNESCAPED_UNICODE 是对汉字进行处理的参数 然后HTML代码如下 把那个json_city赋值成我们用php生成的json即可 < ...
- select下拉二级联动
function opt(){ var id = $("#ids").val(); $.ajax({ type: "POST", url: "$ ...
- 通同select便签实现简单的二级联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery实现select二级联动
jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- 纯js做的select二级联动
分步阅读 select 联动用到的范围很广,下面介绍一下简单的二级联动 方法/步骤 做一个简单的html页面,用于显示select联动,如图所示: 设置js,点击一级选择项时,创建其下对应的二 ...
随机推荐
- python self
Python要self的理由 Python的类的方法和普通的函数有一个很明显的区别,在类的方法必须有个额外的第一个参数(self),但在调用这个方法的时候不必为这个参数赋值(显胜于隐的引发). Pyt ...
- Error updating database. Cause: java.sql.BatchUpdateException: Field 'id' doesn't have a default value
异常信息 ### Error updating database. Cause: java.sql.BatchUpdateException: Field 'id' doesn't have a de ...
- Sagit.Framework For IOS 开发框架入门教程4：注册页布局-被消灭的变量
前言: 上篇写完:Sagit.Framework For IOS 开发框架入门教程3:Start引导页-框架布局和隐藏事件的内幕 之后,好久没写文章了,有IT连创业系列.有DotNetCore的一篇文 ...
- grep 、find 、tree 新发现
[root@localhost tftpboot]# ip address | grep -A 1 " eno16777736"2: eno16777736: <BROADC ...
- ABP 用swagger UI测试API报401无权限访问问题
问题描述: 当我们用swagger UI对Web API 进行测试时报401错误 我们点开GET /api/services/app/Role/GetAll,输入参数 点击Try it out!按钮, ...
- KVM 初探
KVM 是业界最为流行的 Hypervisor,全称是 Kernel-based Virtual Machine.它是作为 Linux kernel 中的一个内核模块而存在,模块名为 kvm.ko,也 ...
- Java-单例模式详解（图文并茂，简单易懂）
PS:首先我们要先知道什么是单例,为什么要用单例,用的好处是什么等问题来看. 1:java中单例模式是一种常见的设计模式,单例模式的写法有好几种,这里主要介绍两种:懒汉式单例.饿汉式单例单例模式有以下 ...
- Oracle学习笔记_07_模糊查询
附录:参考资料 1.Oracle sql语言模糊查询--like后面的通配符 2.oracle sql语言模糊查询--通配符like的使用教程
- windows server数据库备份
@echo off //设置生成文件名字 set "Ymd=%date:~,4%%date:~5,2%%date:~8,2%"//使用mysqldump输出sql文件 cesec ...
- Keras:基于Theano和TensorFlow的深度学习库
catalogue . 引言 . 一些基本概念 . Sequential模型 . 泛型模型 . 常用层 . 卷积层 . 池化层 . 递归层Recurrent . 嵌入层 Embedding 1. 引言 ...