浏览器&前端

四级联动、三级联动、多级联动

字号+ 作者:风潇潇 来源:原创 2016-07-07 00:05 我要评论( )

福利来了哈,这是我写的一款select联动,可以从单级联动到多级联动任意组合,联动任务分分钟搞定,如果用了拜托帮我踩踩

这是效果图:

这个联动是由对象组合而成的。所以很方便,你想要多少级联动,只要设置对应的父子关系,获取数据对应的url以及将需要请求ajax的请求对象组合过去,在你选择的时候,他就会自动给你去发请求,并且初始化select。平时可能要设置2-3个联动,后台写好了,这里几分钟就搞定了,也没必要每次都去自己去实现一个联动,可以为程序员节约大量时间和精力。当然可能还有一些bug没测试到。不过我这里暂时没发现其他问题,如果发现请留言评论我去改好。
不多说请看代码:
Index.jsp

 <script type="text/javascript" src="jquery-1.12.3.min.js"></script>
   <script type="text/javascript" src="LinkageSelect.js"></script>
  <script language="javascript" >
 $(document).ready(function(){
     /**url返回时的格式
        var array=[{optionName:"一",value:"1"},{optionName:"二",value:"2"}];
     */
    //根目录,初始化各级联动对象
     var rootSelect=new LinkageSelect({
        url:"http://localhost:8080/select2/select/data",
        data:{id:""},
        id:"x1"
     });
     var firstSelect=new LinkageSelect({
         url:"http://localhost:8080/select2/select/data",
         handlerPostData:function(value){
             return {id:"2,"+value};
         },      
         id:"x2"
      });
     var secondSelect=new LinkageSelect({
         url:"http://localhost:8080/select2/select/data",
         handlerPostData:function(value){
             return {id:"3,"+value};
         },      
         id:"x3"
      });
     var threeSelect=new LinkageSelect({
         url:"http://localhost:8080/select2/select/data",
         handlerPostData:function(value){
             return {id:"4,"+value};
         },      
         id:"x4"
      });
    //设置对应的父子关系
    rootSelect.setSubSelect(firstSelect);
    firstSelect.setSubSelect(secondSelect);
    secondSelect.setSubSelect(threeSelect);
    
    rootSelect.init({values:["3","5"],index:0});
    /*secondSelect.init({value:firstSelect.getValue()}); */

     $("#getvalue").click(function(){
       alert(rootSelect.getValue());
       alert(firstSelect.getValue());
       alert(secondSelect.getValue());
       alert(threeSelect.getValue());
     });

     $("#setvalue").click(function(){
          rootSelect.setValue("2");
     });

     $("#reset").click(function(){
      rootSelect.resetSelect();
     });
     
     $("#reload").click(function(){
         rootSelect.init();
     })
     
      $("#initValuse").click(function(){
          rootSelect.init({values:["3","5","6"],index:0});
     })


  });

  </script>
 </head>
 <body>

  <form name="form1" method="post">
     <br><br>
     <SELECT ID="x1" NAME="x1"  >
      <OPTION></OPTION>
     </SELECT>
     <SELECT ID="x2" NAME="x2"  >
      <OPTION ></OPTION>
     </SELECT>
     <SELECT ID="x3" NAME="x3">
      <OPTION></OPTION>
     </SELECT>
     <SELECT ID="x4" NAME="x4">
      <OPTION></OPTION>
     </SELECT>
      <br/>
      <p/>
         <input value="取值" id="getvalue" type="button" >
      <br/>
      <input value="设置值2" id="setvalue" type="button" >
       <br/>
      <input value="重置" id="reset" type="button" >
      <br/>
      <input value="重新加载" id="reload" type="button" >
       <br/>
      <input value="联动设置初始值" id="initValuse" type="button" >

  </form>
 </body>


这是 LinkageSelect.js的源码

//联动select
    function LinkageSelect(opt){
    //联动的数据源
     this.array=opt.array;
    //通过ajax获得的数据的url
     this.url=opt.url;
     //select的id
     this.id=opt.id;
     //用来发送ajax请求的数据
     //如果有handlerPostData以及父类传递过来的数据,则会被覆盖
     this.postData=opt.data;
     //此对象的Select
     this.select=null;
     //转换服务器传递过来的数据的函数
     this.handlerData=opt.handlerData;
     //持有子Select
     this.subSelect=null;
     //从父类传递过来的数据转换函数
     this.handlerPostData=opt.handlerPostData;
     var me=this;

    this.ajaxData=function(callback){
        if(me.url){
            var aj = $.ajax( {  
                    url:me.url,//路径
                    data:me.postData,  
             type:'post',
             dataType:'json',  
             success:function(data) {  
               if(callback){
                callback(data);
               }
              },  
             error : function() {  
                   alert("网络出错等!");  
              }  
            });
        }
     }

//生成此对象的Select
  var reset=function(me,data){
      me.array=data;
      var obj=me.select;
      obj.length=me.array.length;
      obj.options[0]=new Option("请选择",'');
      for(var i=0;i< me.array.length;i++){
        obj.options[i+1]=new Option(me.array[i].optionName,me.array[i].value);
      }
    }

     /**
      * 初始化,应该将
      **/
    this.init=function(obj){
        if(!window.jQuery){
            throw new Error("LinkageSelect need jQuery!");
        }
        if($("#"+me.id).length<=0) {//必须有id
            throw new Error("LinkageSelect init need select id!");
        }
        if(obj && obj.postData){
            if(me.handlerPostData){
                me.postData=me.handlerPostData(obj.postData);
            }else{
                me.postData=obj.postData;
            }
        }
        // 初始化数据
        me.ajaxData(function(data){
            if(me.handlerData){
               reset(me,me.handlerData(data));
            }else{
              reset(me,data);
            }
            //初始化子select,以及选择初始值
            if(obj && obj.values){
                me.setValues(obj.values,obj.index);
               //
            }else{
                if(me.getSubSelect()){
                    me.getSubSelect().resetSelect();
                }
            }
            //更更改事件之后,需要初始化子select
            me.select.onchange=function(){
                //选的空值
                if(me.getValue() == '' && me.getSubSelect()){
                    me.getSubSelect().resetSelect();
                }else if(me.getValue() != '' && me.getSubSelect()){
                    me.getSubSelect().init({postData:me.getValue()});
                    //需要将子select以下的selectreset
                    if(me.getSubSelect().getSubSelect()){
                        me.getSubSelect().getSubSelect().resetSelect();
                    }
                }
            }
        });
        
     };
     

     this.resetSelect=function(){
        var obj=me.select;
        obj.length=1;
        obj.options[0]=new Option("请选择",'');
        $(me.select).val('');
        if(me.getSubSelect()){
            me.getSubSelect().resetSelect();
        }
     }

     this.setValue=function(value){
        $(me.select).val(value);
        if(me.getValue() != '' && me.getSubSelect()){
            me.getSubSelect().init({postData:me.getValue()});
            //需要将子select以下的selectreset
            if(me.getSubSelect().getSubSelect()){
                me.getSubSelect().getSubSelect().resetSelect();
            }
        }
     }

     this.getValue=function(){
        return $(me.select).val();
     }

     this.getSubSelect=function(){
        return me.subSelect;
     }

     this.setSubSelect=function(subSelect){
          me.subSelect=subSelect;
     }
     
     this.setValues=function(values,i){
         if(values && i<values.length){
             $(me.select).val(values[i]);
             if(me.getValue() != '' && me.getSubSelect()){
                 me.getSubSelect().init({postData:me.getValue(),values:values,index:i+1});
                 //需要将子select以下的selectreset
             }
         }
     }
     
     me.select=document.all[me.id];
     me.resetSelect();
  }
 

服务器请求的数据的java代码:
SelectVo.java

public class SelectVo {

    private String value;
    
    private String optionName;
    
    
    
    public SelectVo(String value, String optionName){
        super();
        this.value = value;
        this.optionName = optionName;
    }

    public String getValue() {
        return value;
    }
    
    public void setValue(String value) {
        this.value = value;
    }
    
    public String getOptionName() {
        return optionName;
    }
    
    public void setOptionName(String optionName) {
        this.optionName = optionName;
    }

    @Override
    public String toString() {
        return "{ \"value\":\"" + value + "\", \"optionName\":\"" + optionName + "\"}";
    }
    
    
    
}


SelectUtils.java

public static String getSelectDataByParentId(String id){
        if(id==null ||  id.trim().equals("")){
            List<SelectVo>  vos=new ArrayList<SelectVo>();
            for(int i=0;i<10;i++){
                vos.add(new SelectVo(i+"",i+""));
            }
            return toJson(vos);
        }
        else{
            //格式 1,2 联动级数,选择值
            String[] ids=id.split(",");
            if(ids.length == 2){
                List<SelectVo>  vos=new ArrayList<SelectVo>();
                for(int i=0;i<10;i++){
                    vos.add(new SelectVo(i+"",ids[0]+"_"+ids[1]+"_"+i));
                }
                return toJson(vos);
            }
            return null;
        }
           
    }

    private static String toJson(List<SelectVo> vos) {
        StringBuffer sb=new StringBuffer();
        sb.append("[");
        for(SelectVo vo:vos){
            sb.append(vo.toString()).append(",");
        }
        sb.deleteCharAt(sb.length()-1);
        sb.append("]");
        return sb.toString();
    }


赶紧试试吧。真的很方便哦

 

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)