Question

我有2个下拉列表。一个表示“月”（命名为“monthDropdownList”），另一个表示“天”（命名为“dateDropDownList”）。

我给的总天数为31.但我需要做的是选择二月。

我只需要在我的“daysDropdownList”上显示28天。

如何使用Java springMvc作为后端，jsp作为客户端使用？

Answer 1

我遇到过这种情况并创建了这个example。

var _monthList = [
    {id:"1",name:"January"} ,
    {id:"2",name:"February"} ,
    {id:"3",name:"March"} ,
    {id:"4",name:"April"} ,
    {id:"5",name:"May"} ,
    {id:"6",name:"June"},
    {id:"7",name:"July"} ,
    {id:"8",name:"August"} ,
    {id:"9",name:"September"} ,
    {id:"10",name:"October"} ,
    {id:"11",name:"November"} ,
    {id:"12",name:"December"}];


function createYears(){
	var _year = [];
    for (var i = 2000; i<new Date().getFullYear(); i++){
    	_year.push({id:i, name:i});
    }
    $("#cbYear").html(createOptions(_year));
}

function createMonths(){
	$("#cbMonth").html(createOptions(_monthList));
}

function createDate(){
	var _year = $("#cbYear option:selected").val();
    var _month = $("#cbMonth option:selected").val();
    var monthlen = new Date(_year,_month,0).getDate();
    var _dates = [];
    for (var i=1; i<=monthlen; i++){
    	_dates.push({id:i, name:i});
    }
    
    $("#cbDate").html(createOptions(_dates));
}

function createOptions(dataset){
	var optionStr = "<option></option>";
    $.each(dataset, function(key, value){
        var id = value.id? value.id:key;
        var text = value.name;
        var val = value.value?value.value:value.id;
        optionStr += "<option id="+ id + " name='"+ text+ "' value='"+ val + "'>"+ text + "</option>"
    });
    return optionStr;
}

function registerEvents(){
	$("#cbMonth").on("change", function(e){
    	createDate();
    });
}
    
(function(){
	createYears();
    createMonths();
    registerEvents();
})()

select{
    background:#fff;
    color:blue;
    width:100px;
    padding:5px;
    border-radius:4px;
    border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="cbYear"></select>
<select id="cbMonth"></select>
<select id="cbDate"></select>

Answer 2

$("#monthDropdownList").change(function(){
    var w1 =$("#dateDropDownList");
    var month = parseInt($("#monthDropdownList").val());
    var days = [31 ,28,31 ,30,31,30,31,31,30,31,30,31 ];
    var year = parseInt($("#year").val());
    if(((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) {
        days[1] = 29;
    }
    var optionhtml="";
    for(var i=1;i<=days[month-1];i++){ 
      optionhtml += '<option  value="' + i + '">' + i + '</option>';
    }
    w1.html(optionhtml);
});

Answer 3

<html>
<script>


function getDays() {
var x = document.getElementById("myMonth").value;
select = document.getElementById("days");
if(x=="FEB")
select.options.add( new Option("28","1", true, true) );
else if(x=="APR"||x=="JUN"||x=="SEP"||x=="NOV")
select.options.add( new Option("30","1", true, true) );
else
select.options.add( new Option("31","1", true, true) );
}
</script>
<body>
<select id="myMonth" onchange="getDays()">
<option value="0">Please Select
<option value="JAN">JAN
<option value="FEB">FEB
</select>
<select id="days" >
<option value="0">Please Select
</select>
</body>
</html>

如何根据另一个下拉列表更改下拉列表

3 个答案: