2015-11-03 134 views
2

我有一個2下拉列表。一個表示「月」(命名爲「monthDropdownList」),另一個表示「天」(命名爲「dateDropDownList」)。如何更改關於另一個下拉列表的下拉列表

我給總天數爲31.但我需要做的是在選擇二月。

我只需要在我的「daysDropdownList」上顯示28天。

如何使用Java springMvc作爲後端和jsp作爲客戶端?

回答

2

我遇到過這種情況,並創建了這個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(){ 
 
\t var _year = []; 
 
    for (var i = 2000; i<new Date().getFullYear(); i++){ 
 
    \t _year.push({id:i, name:i}); 
 
    } 
 
    $("#cbYear").html(createOptions(_year)); 
 
} 
 

 
function createMonths(){ 
 
\t $("#cbMonth").html(createOptions(_monthList)); 
 
} 
 

 
function createDate(){ 
 
\t 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++){ 
 
    \t _dates.push({id:i, name:i}); 
 
    } 
 
    
 
    $("#cbDate").html(createOptions(_dates)); 
 
} 
 

 
function createOptions(dataset){ 
 
\t 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(){ 
 
\t $("#cbMonth").on("change", function(e){ 
 
    \t createDate(); 
 
    }); 
 
} 
 
    
 
(function(){ 
 
\t 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>

+0

thanku ...它的工作原理... – Miller

0
$("#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); 
}); 
0
<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> 
相關問題