<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,点击一级选择项时,创建其下对应的二 ...
随机推荐
- [UWP]了解TypeConverter
1. 前言 TypeConverter是XAML解释器的幕后功臣,它做了大量工作,从WPF诞生以来,几乎每一次XAML的运作都有它的参与.虽然UWP中TypeConverter已经彻彻底底退居幕后,连 ...
- intelli idea中配置Tomcat找不到的解决办法
这两天新入职一家公司,公司用的是intelli idea,以前用习惯了eclipse,感觉到有点不太习惯,当然,intelli idea也有自己的强大之处.在开始配置Tomact之前,按照网上的说法, ...
- myeclipse 2014 customize_Perspective 失效解决方法-有效
1.将9个jar复制到myeclipse安装目录\plugins中 2.删除和这9个jar同包名但是版本号较低的9个文件 3.重启myeclipse 2014 三步走: 到这个地址下载 http:// ...
- 随聊——Python的前世今生
1989年圣诞节前夕,山雨欲来风满楼,计算机程序设计语言界隐隐有大事要发生,果然不出所料.江湖人称龟叔(Guido von Rossum),就是这位祖籍荷兰的大能,在圣诞节百无聊赖的期间,发明了Pyt ...
- xamarin android alertdialog详解
说明一下:学习xamarin android一段时间,准备写一些xamarin android相关的例子,alertdialog也是使用的非常多得空间之一,非常感谢鸟巢上的小猪,我也是看着他写的教程学 ...
- cut 命令详解
cut 作用:按列提取文件 参数: -d 指明列分隔符 -f 选择输出的区域 -c 指定字符位置 -b :以字节为单位进行分割.这些字节位置将忽略多字节字符边界,除非也指定了 -n 标志. -c : ...
- 设计模式之 - 模板模式（Template Pattern）
引入:这几天在看一本讲spring源码的书<SPRING技术内幕>里面在讲加载配置文件的时候,可以有不同的加载方式,如根据文件系统目录加载配置文件(FileSystemXmlApplica ...
- K:java 断言 assert 初步使用：断言开启、断言使用
@转自天地悠悠的个人博客 主要总结一下在eclipse中如何使用断言. (一)首先明确: java断言Assert是jdk1.4引入的. jvm 断言默认是关闭的. 断言是可以局部开启的,如:父类禁止 ...
- 有关opacity或RGBA设置颜色值及元素的透明值
opacity声明来设置元素的透明值,当opacity设置元素的透明值,内部的文字及元素也会透明,通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化 opacity声明来 ...
- Use Zabbix Monitor Find ‘DBCC CheckDB’ Problem
下面是修改前后的对比截图: 如下图: 下图是确定问题并修改后对比图,左边圈是修改前,右边圈是修改后对比截图:当看到周期性的性能指数,一般是计划性任务引起:通过DMV视图,找到引起等待的原因检查数据库完 ...