<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,点击一级选择项时,创建其下对应的二 ...
随机推荐
- Intellij IDEA设置运行时Java参数
1.选中类,点击顶部菜单:Run-->Edit Configuration,如下所示: 2.选择Application,指定的类,在右边选择Configuration,并在VM options中 ...
- jQuery架构（源码）分析
( function( global, factory ) { "use strict"; if ( typeof module === "object" &a ...
- IOS学习7——cocoapod安装与使用教程
参考: iOS开发-CocoaPods使用详细说明 iOS开发-CocoaPods使用详细说明 一.CocoaPods简述 iOS开发时,项目中经常会需要引用第三方框架库,如果每用到一个第三方框架哦 ...
- 使用puppet
首先配置一个默认文件 只是首次创建的时候才需要重启,后期不需要重启! [root@master manifests]# vim /etc/puppet/manifests/site.pp node d ...
- JAVA 实现tail -f 日志文件监控功能
工具: <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</ar ...
- JMeter 插件 Json Path 解析HTTP响应JSON数据
一.基本简介 JMeter 是一个不错的负载和性能测试工具,我们也用来做 HTTP API 接口测试.我们的 API 返回结果为JSON数据格式.JSON 简介,JSON 教程. JSON 已经成为数 ...
- jamup与gb2i组合
软件一定要开嗓单效果器,最好不要关闭中断软件/声音,每次有重新检测电流必须会有嗓音,最好用ipad ,不然会烦死人.默认delay太长,在DLY面板修改 gb2i 效果还行,他的价值重在使用,让新人使 ...
- 房上的猫：switch选择结构，与选择结构总结
switch选择结构: 一.定义: switch选择结构,可以方便地解决等值判断问题二.语法: switch(表达式){ case 常量1: //代码块1; break; c ...
- SQLServer 发布订阅（Replication）造成的Memroy压力（cmemthread等待）
深入了解下发布订阅: 数据复制:允许一个数据源向一个或多个目标数据库分发数据,只需要OLE DB 访问接口即可访问: 整个复制框架包含:复制组件,复制代理,复制类型: 复制组件: 发布服务器: ...
- webpack 构建简单的vue项目
---恢复内容开始--- webpack主要执行流程: 入口→loader处理→出口 // webpack.config.js 文件:const path = require('path') // 引 ...