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,
width: 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'> " + row.text + "</span>"
},
onHidePanel:function () {
},
onSelect: function (recoder) {
rotateSel=recoder;
}
});
/*结束-月框加载*/
$dataCombo.last().combobox({
valueField:"id",
textField:"text",
data: month,
editable: false,
width: 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'> " + row.text + "</span>"
}
});
/*开始-月框加载*/
$dataCombo.first().combobox({
valueField:"id",
textField:"text",
data:month,
value:"1",
editable:false,
width: 80,
height: 30,
panelWidth: 80,
panelHeight: 'auto',
formatter: function (row) {
return "<span class='glyphicon glyphicon-check'> " + 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,
width: 80,
height: 30,
panelWidth: 80,
panelHeight: 'auto',
formatter: function (row) {
return "<span class='glyphicon glyphicon-check'> " + 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,
width: 80,
height: 30,
panelWidth: 80,
panelHeight: 'auto',
onLoadSuccess:function(){
},
formatter: function (row) {
return "<span class='glyphicon glyphicon-check'> " + row.text + "</span>"
},
onSelect: function (node) {
var combo=new ComboChange(null,node.id,null);
combo.firstYearChange();
}
});