年，月 ，季节 下拉框

css:
   <style>
　　　　.combo-title { padding-right: 5px }

      .combo-data > div { display: inline-block }

</style>

html:

 <div class="row">
                <div class="col-xs-2 topic" style="padding-left: 0">指标公共维度:</div>
                <div class="col-xs-7 combo-data">
                    <span class="combo-title">频率:</span>
                    <div id="rotate"></div>
                    <div class="data-combo-year"></div>//开始年
                    <div>
                        <div class="data-combo"></div>//开始月或季节
                    </div>
                    <span style="color:darkgreen">———</span>
                    <div class="data-combo-year"></div>//结束年
                    <div>
                        <div class="data-combo"></div>//结束月和季节
                    </div>
                </div>
            </div>

　　js 代码：一定要小心使用onSelect，因为它在下拉框重新加载或是加载时，会执行里面的内容，在做联动框时，得好好注意！，为了避免可以使用onChange,或是onHidePanel.

var $dataCombo = $(".data-combo"),
       $yearCombo = $(".data-combo-year");


 var year_f, year_last, year_s;
    var yearArr = [];
    var month = [
        {id: '1', text: '1月'},
        {id: '2', text: '2月'},
        {id: '3', text: '3月'},
        {id: '4', text: '4月'},
        {id: '5', text: '5月'},
        {id: '6', text: '6月'},
        {id: '7', text: '7月'},
        {id: '8', text: '8月'},
        {id: '9', text: '9月'},
        {id: '10', text: '10月'},
        {id: '11', text: '11月'},
        {id: '12', text: '12月'}
    ];
    var roteArr = [{"id": 1, "text": "年份", "value": "1"},
    {"id": 2, "text": "季度", "value": "2"},
    {"id": 3, "text": "月份", "value": "3"}];/*频率选择数组*/
    var season = [
        {id: '1', text: '1季度'},
        {id: '2', text: '2季度'},
        {id: '3', text: '3季度'},
        {id: '4', text: '4季度'}
    ];/*季度*/
    getYears();/*获得近4年*/
    function getYears() {
        var nowDate = new Date();
        year_f = nowDate.getFullYear();
        year_last = year_f - 1;
        year_s = year_f - 3;
        var id, text;
        for (var y = year_f; y >= year_s; y--) {
            id = y.toString();
            text = id + "年";
            yearArr.push({id: id, text: text});
        }
    }

/*默认第二个年的数组，包含今年和去年*/
var secondYear = yearArr.slice(0, 2);
var is_loadWhole=true;
function ComboChange(monNode,oneYear,twoYear){
    this.rotateId=$("#rotate").combobox("getValue");/*获取频率*/
    /*得到要操作的月或季度数组*/
    //第二个月
    this.endMon=parseInt($dataCombo.last().combobox("getValue"));

    //开始月
    this.startMon= monNode ? parseInt(monNode) : parseInt($dataCombo.first().combobox("getValue"));

    //开始年
    this.startYear=oneYear?parseInt(oneYear):parseInt($yearCombo.first().combobox("getValue"));
    // 结束年
    this.endYear=twoYear?parseInt(twoYear):parseInt($yearCombo.last().combobox("getValue"));
}
ComboChange.prototype.getRotate=function(){
    if (this.rotateId == 3) {
        return month.slice();
    } else if (this.rotateId == 2) {
        return season.slice();
    }
};
ComboChange.prototype.firstMonChange = function () {
    if(this.startYear==this.endYear){
        var secondMonArr = this.getRotate().slice(this.startMon - 1);/*第二个月或季度显示的数组，从star开始*/
        is_loadWhole=this.startMon==1?true:false;/*加载的不是所有月*/
        $dataCombo.last().combobox("loadData", secondMonArr);
        if (this.startMon > this.endMon) {/*前面的月或季度大于后面的*/
            $dataCombo.last().combobox("setValue", this.startMon); /*同步两个*/
        }
    }
};
ComboChange.prototype.secondYearChange=function () {
    if(this.endYear==this.startYear){
        if(this.rotateId==2 || this.rotateId==3){
            var secondMonArr = this.getRotate().slice(this.startMon - 1);/*第二个月或季度显示的数组，从star开始*/
            is_loadWhole=this.startMon==1?true:false;/*加载的不是所有月*/
            $dataCombo.last().combobox("loadData", secondMonArr);
            if(this.startMon>this.endMon){
                $dataCombo.last().combobox("setValue", this.startMon); /*同步两个*/
            }
        }

    }else{
        if(this.rotateId==2 || this.rotateId==3){
            if(! is_loadWhole){
                is_loadWhole=true;
                $dataCombo.last().combobox("loadData", this.getRotate());
            }
        }
    }
};
ComboChange.prototype.firstYearChange=function () {
    var self=this;
    var secondYearArr=yearArr.slice(0, (year_f - self.startYear + 1));/*第二个年要加载的*/
    $yearCombo.last().combobox("loadData", secondYearArr);
    if (self.startYear >=self.endYear) {
        if(self.startYear!=self.endYear){/*同步年份*/
            $yearCombo.last().combobox("setValue",this.startYear);
        }
        if(this.rotateId==2 || this.rotateId==3){
            var secondMonArr = self.getRotate().slice(self.startMon - 1);/*第二个月或季度显示的数组，从star开始*/
            is_loadWhole=self.startMon==1?true:false;/*加载的不是所有月*/
            $dataCombo.last().combobox("loadData", secondMonArr);
            if(self.startMon>self.endMon){
                $dataCombo.last().combobox("setValue", self.startMon); /*同步两个*/
            }
        }
    } else {
        if(this.rotateId==2 || this.rotateId==3){
            if (!is_loadWhole){
                is_loadWhole=true;
                $dataCombo.last().combobox("loadData",self.getRotate());
            }
        }
    }
};
/*频率框加载*/
var rotateSel;
$("#rotate").combobox({
    valueField: "id",
    textField: "text",
    data: roteArr,
    editable: false,
     70,
    height: 30,
    panelWidth: 70,
    value:"3",
    panelHeight: 'auto',
    onLoadSuccess:function(){
        console.log($("#rotate").combobox("options"));
    },
   onChange:function (newVal,oldVal) {
        if(newVal!=oldVal){
            if (newVal == 1) {/*1:频率为年；2：季节；3：月份*/
                $dataCombo.parent().hide();
            } else {
                var firstArr;
                firstArr=newVal==2?season:month;
                $dataCombo.combobox("clear");
                $dataCombo.parent().show();
                is_loadWhole=true;
                $dataCombo.combobox("loadData", firstArr);
                $dataCombo.combobox("setValue", "1");
            }
        }

   },
    formatter: function (row) {
        return "<span class='glyphicon glyphicon-check'>&nbsp;" + row.text + "</span>"
    },
    onHidePanel:function () {
    },
    onSelect: function (recoder) {
        rotateSel=recoder;
    }
});

/*结束-月框加载*/
$dataCombo.last().combobox({
    valueField:"id",
    textField:"text",
    data: month,
    editable: false,
     80,
    height: 30,
    panelWidth: 80,
    panelHeight: 'auto',
    value:"1",
    onLoadSuccess:function (data) {
        var text=is_loadWhole?"整年":"不完整";
        alert(text);
    },
    formatter: function (row) {
        return "<span class='glyphicon glyphicon-check'>&nbsp;" + row.text + "</span>"
    }
});

/*开始-月框加载*/
$dataCombo.first().combobox({
    valueField:"id",
    textField:"text",
    data:month,
    value:"1",
    editable:false,
     80,
    height: 30,
    panelWidth: 80,
    panelHeight: 'auto',
    formatter: function (row) {
        return "<span class='glyphicon glyphicon-check'>&nbsp;" + row.text + "</span>"
    },
    onChange:function(newVal,oldVal) {
        if(newVal!=oldVal){
            var combo= new ComboChange(newVal,null,null);
            combo.firstMonChange();
        }
    },
    onHidePanel:function () {
       /* var combo= new ComboChange(firstMonSel,null,null);
        combo.firstMonChange();*/
    },
    onSelect: function (node){
    }

});

/*结束年份*/
$yearCombo.last().combobox({
    valueField: "id",
    textField: "text",
    data: secondYear,
    value: year_f,
    editable: false,
     80,
    height: 30,
    panelWidth: 80,
    panelHeight: 'auto',
    formatter: function (row) {
        return "<span class='glyphicon glyphicon-check'>&nbsp;" + row.text + "</span>"
    },
    onLoadSuccess:function () {
    },
    onChange:function(newVal,oldVal) {
        if(newVal!=oldVal){
            var combo = new ComboChange(null, null, newVal);
            combo.secondYearChange();
        }
    },
    onHidePanel:function () {
        /*var combo = new ComboChange(null, null, endYearSel);
        combo.secondYearChange();*/
    },
    onSelect: function (node) {
    }
});

/*开始年份*/
$yearCombo.first().combobox({
    valueField:"id",
    textField: "text",
    data:yearArr,
    value:year_last,
    editable: false,
     80,
    height: 30,
    panelWidth: 80,
    panelHeight: 'auto',
    onLoadSuccess:function(){
    },
    formatter: function (row) {
        return "<span class='glyphicon glyphicon-check'>&nbsp;" + row.text + "</span>"
    },
    onSelect: function (node) {
        var combo=new ComboChange(null,node.id,null);
            combo.firstYearChange();
    }
});