<select name="searchYear" >
<option value="">--</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>年
<select name="searchMonth" >
<option value="" class="-">--</option>
<option value="10" class="2015">10</option>
<option value="11" class="2015">11</option>
<option value="12" class="2015">12</option>
<option value="01" class="2016">01</option>
<option value="02" class="2016">02</option>
<option value="03" class="2016">03</option>
</select>月
要求:实现以下连动方式
1.年:选【--】时,月的下拉框只有【--】
2.年:选【2015】时,月的下拉框只有【--,10,11,12】,选中值为【--】
3.年:选【2016】时,月的下拉框只有【--,01,02,03】,选中值为【--】
jquery实现方式:
$(function(){
$('select[name="searchYear"]').change(function() {
var year = $('select[name="searchYear"] option:selected').val();
var count = $('select[name="searchMonth"] option').size();
for (var i = 0; i < count; i++) {
var month = $('select[name="searchMonth"] option:eq(' + i + ')');
if(year == "") {
if(month.attr("class") == "-") {
month.prop('selected',true);
} else {
var monthP = month.parent("span");
if(!monthP.length){
// month.hide() 无效
month.wrap("<span style='display:none'></span>");
}
}
} else {
if(month.attr("class") == year) {
var monthP = month.parent("span");
if(monthP.length){
month.replaceAll(monthP);
}
} else {
if(month.attr("class") == "-") {
month.prop('selected',true);
} else {
var monthP = month.parent("span");
if(!monthP.length){
month.wrap("<span style='display:none'></span>");
}
}
}
}
}
});
})
因为【month.hide()】无效,所以采用【month.wrap("<span style='display:none'></span>");】的方式来隐藏。
【month.show()】由【month.replaceAll(monthP);】这个month子节点来代替包裹着【span】的父节点来显示。