select下拉列表实现多级联动

最新推荐文章于 2022-01-19 09:40:05 发布

Trouble-Solver

最新推荐文章于 2022-01-19 09:40:05 发布

阅读量4.7k

点赞数 1

分类专栏：数据库前端

本文链接：https://blog.csdn.net/syq8023/article/details/100334181

版权

数据库同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端

19 篇文章 5 订阅

订阅专栏

下拉列表实现多级联动

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;
   }
}

Trouble-Solver

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
1
评论
select下拉列表实现多级联动

下拉列表实现多级联动html/jsp页面：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
复制链接

扫一扫