<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,点击一级选择项时,创建其下对应的二 ...
随机推荐
- WebGL学习(3) - 3D模型
原文地址:WebGL学习(3) - 3D模型 相信很多人是以创建逼真酷炫的三维效果为目标而学习webGL的吧,首先我就是
- shell编写mysql抽取数据脚本
#!/bin/bash DT=`date +%Y%m%d` #当前日期YESTERDAY=`date -d "yesterday" +%Y-%m-%d` #昨天,用于处理数据的日期 ...
- 《TCP-IP详解卷1：协议》【PDF】下载
<TCP-IP详解卷1:协议>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062539 内容简介<TCP/IP详解卷1:协 ...
- Huffman 哈夫曼编码与译码的原理剖析及C++实现
原理 我们在信息存储时,希望以最少的空间去存储最大的数据,方便数据的传输,那么该怎样做呢? 我们想到将源信息转化为01序列存储,但是这样以来又有一个问题,就是子串匹配问题,我们为了解决这个方法,想到了 ...
- Kafka+Storm写入Hbase和HDFS
1.Storm整合Kafka 使用Kafka作为数据源,起到缓冲的作用 // 配置Kafka订阅的Topic,以及zookeeper中数据节点目录和名字 String zks = KafkaPrope ...
- SQL基本查询_子查询（实验四）
SQL基本查询_子查询(实验四) 1.查询所有员工中薪水低于"孙军"的员工姓名和薪水: 2.查询与部门编号为"01"的岗位相同的员工姓名.岗位.薪水及部门号: ...
- C++ 头文件系列(list)
简介 list实现的实际上是双向链表,所以叫它doubly-linked list也许更好. 因为实现的是双向链表,所以它有两个非常重要的性质: 双向 链表 双向 双向意味着----给定一个元素,我们 ...
- HHVM源码剖析
一.前言 hhvm源码中充满了很多C++11的新特性,并且使用了各种设计模式如工厂,模板方法等,利用智能指针包裹指针,让delete没有肆意的出现 模板,继承,explicit,纯虚函数的出现令代码中 ...
- 读Zepto源码之assets模块
assets 模块是为解决 Safari 移动版加载图片过大过多时崩溃的问题.因为没有处理过这样的场景,所以这部分的代码解释不会太多,为了说明这个问题,我翻译了<How to work arou ...
- FPGA 设计总结（1）
1. set_input_delay和set_output_delay的选项-max和-min的理解 首先 input/output其实是模拟数据在端口外的延时,是一个外部约束条件,目的是为了约束FP ...