下拉列表实现多级联动
html/jsp页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit"/><!-- 让360浏览器默认选择webkit内核 -->
</head>
<div>
<select id="projectcd" name="项目选择">
<option value="all">----请选择----</option>
</select>
</div>
<div>
<select id="rtucode" name="测站选择" >
<option value="">----请选择----</option>
</select>
</div>
</body>
<script>
/*初始化加载项目选择框*/
$(function () {
$.ajax({
type : 'post',
url : 'http://localhost:8080/xxx/xx',
dataType : 'json',
success: function (data){
var depart_list = data.data;
var opts = "";
for( var i = 0 ; depart_index < depart_list.length; i++ ){
var obj = depart_list[i];
opts += "<option value='"+obj.cd+"'>"+obj.nm+"</option>";
}
/*给下拉框付值*/
$("#projectcd").append(opts);
},
error : function(){
alert('菜单加载异常!');
}
})
/*项目选择框的值改变后触发该方法*/
$("#projectcd").change(function(){
/*获取项目选择框的值*/
var cd=$("#projectcd").val();
/*删除测站选择框的值重新再加载*/
$("#rtucode").find("option").remove();
$.ajax({
type : 'post',
url : 'http://localhost:8080/xxx/dd,
data:{"cd":cd},
dataType : 'json',
success: function (data){
var depart_list = data.data;
var opts = "<option value=''>"+"----请选择----"+"</option>" ;
for( var i = 0 ; i < depart_list.length; i++ ){
var obj = depart_list[depart_index];
opts += "<option value='"+obj.stcd+"'>"+obj.stnm+"</option>";
}
/*给下拉框付值*/
$("#rtucode").append(opts);
},
error : function(){
alert('菜单加载异常!');
}
})
});
</script>
</html>
如果第二个下拉框也要初始化的话,只需在初始化方法 $(function () { });中再添加一个ajax即可。
java代码:
@Controller
@RequestMapping("/xxx")
public class selectController{
/**
* 获取项目下拉框
* @Date 2019-08-31
* @author xyq
*/
@RequestMapping("/xx")
@ResponseBody
public Object projectlist(){
Map selectMap = new HashMap();
List<Project> list= new ArrayList<Project>();
Project pro1 = new Project();
Project pro2 = new Project();
pro1.setCd("1");
pro1.setNm("1");
pro2.setCd("2");
pro2.setNm("2");
list.add(pro1);
list.add(pro2);
selectMap.pit("data",list);
return selectMap ;
}
/**
* 获取测站下拉框
* @param
* @Date 2019-08-31
* @author xyq
*/
@RequestMapping("/aa")
@ResponseBody
public Object stationlist(@PathVariable String cd){
Map map = new HashMap();
List<Station> list = new ArrayList<Station>();
List<Station> selectlist = new ArrayList<Station>();
Station st1 = new Station();
Station st2 = new Station();
st1 .setCd("1");
st1 .setStcd("1");
st1 .setStnm("1");
st2 .setCd("2");
st2 .setStcd("2");
st2 .setStnm("2");
list.add(st1);
list.add(st2);
//如果cd值是all全部加载,否则找和项目cd对应的
if(!"all".equals(cd)) {
int i = 0;
for (Station st: list) {
if(cd.equals(st.getCd())){
selectlist .add(st);
}
}
map.put("data", selectlist );
}else{
map.put("data", list);
}
return map;
}
}
实体类:
/*项目实体类*/
public class Project(){
public String cd; //和测站cd是关联字段
public String nm;
public void setCd(String cd){
this.cd=cd;
}
public String getCd(){
return this.cd;
}
public void setNm(String nm){
this.cd=cd;
}
public String getNm(){
return this.nm;
}
}
/*测站实体类*/
public class Station(){
public String cd; //和项目cd字段是关联字段
public String Stcd;
public String Stnm;
public void setCd(String cd){
this.cd=cd;
}
public String getCd(){
return this.cd;
}
public void setStcd(String stcd){
this.stcd=stcd;
}
public String getStcd(){
return this.stcd;
}
public void setStnm(String Stnm){
this.Stnm=Stnm;
}
public String getStnm(){
return this.Stnm;
}
}