How to change dropdownlist with respect to another dropdownlist

Question

I have a 2 dropdown lists. One indicates "month"(named as "monthDropdownList") and other indicates "days"(named as "dateDropDownList").

I am giving total number of days as 31.But I need to do is while selecting February.

I just need to show 28 days on my "daysDropdownList".

How to do it using Java springMvc as backend and jsp as clientside?

score 2 · Accepted Answer · answered Nov 03 '15 at 08:03

I have encountered this situation and had created this 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>

score 0 · Answer 2 · answered Nov 03 '15 at 07:05

$("#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);
});

score 0 · Answer 3 · answered Nov 03 '15 at 10:49

<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>

How to change dropdownlist with respect to another dropdownlist

3 Answers3