2015-11-03 4 views
2

У меня есть два раскрывающихся списка. Один указывает «месяц» (называемый «monthDropdownList»), а другой указывает «дни» (называемый «dateDropDownList»).Как изменить выпадающий список по отношению к другому выпадающему списку

Я даю общее количество дней как 31. Но мне нужно сделать это, выбрав февраль.

Мне просто нужно показать 28 дней на моем «daysDropdownList».

Как это сделать, используя Java springMvc в качестве backend и 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> 
Смежные вопросы