Question

I developed one web page that contains DOB field. So i developed 3 dropdowns DdlYear, DdlMonth, DdlDay. Now i want code snippet that 3 dropdowns are changing dynamically in javascript.when the user selects a leap year then feb month contains 29 days and number of days should be shown according to the month.

Answer 1

I think the following code snippet may solves your problem.

$(document).ready(function () {

    $("#DpdwnMonth").change(function () {

        if ($("#DpdwnYear").val() !== "0" && ($("#DpdwnYear").val()) % 4 === 0 && $("#DpdwnMonth").val() === "2") {
            if ($('#DpdwnDay :last').val() === "31") {
                $("option[value='30']").remove();
                $("option[value='31']").remove();
            }
            else if ($('#DpdwnDay :last').val() === "28") {
                var myOptions = { 29: '29' };
                $.each(myOptions, function (val, text) {
                    $('#DpdwnDay').append($('<option></option>').val(val).html(text));

                });
            }
            else if ($('#DpdwnDay :last').val() === "30") {
                $("option[value='30']").remove();
             }
        }

        else if ($("#DpdwnMonth").val() === "4" || $("#DpdwnMonth").val() === "6" || $("#DpdwnMonth").val() === "9" || $("#DpdwnMonth").val() === "11") {
            if ($('#DpdwnDay :last').val() === "31") {
                $("option[value='31']").remove();

            }
            else if ($('#DpdwnDay :last').val() === "29") {
                var myOptions = { 30: '30' };
                $.each(myOptions, function (val, text) {
                    $('#DpdwnDay').append($('<option></option>').val(val).html(text));

                });
            }
            else {
                var myOptions = { 29: '29', 30: '30' };
                $.each(myOptions, function (val, text) {
                    $('#DpdwnDay').append($('<option></option>').val(val).html(text));

                });
            }
        }
        else if ($("#DpdwnMonth").val() === "2") {
            $("option[value='29']").remove();
            $("option[value='30']").remove();
            $("option[value='31']").remove();

        }
        else {
            if ($('#DpdwnDay :last').val() === "28") {
                var myOptions = { 29: '29', 30: '30', 31: '31' };
                $.each(myOptions, function (val, text) {
                    $('#DpdwnDay').append($('<option></option>').val(val).html(text));
                });

            }
            else if ($('#DpdwnDay :last').val() === "29") {
                var myOptions = { 30: '30', 31: '31' };
                $.each(myOptions, function (val, text) {
                    $('#DpdwnDay').append($('<option></option>').val(val).html(text));
                });

            }
            else if ($('#DpdwnDay :last').val() === "30") {
                var myOptions = { 31: '31' };
                $.each(myOptions, function (val, text) {
                    $('#DpdwnDay').append($('<option></option>').val(val).html(text));
                });

            }

        }

    });

    $("#DpdwnYear").change(function () {

        if ($("#DpdwnYear").val() !== "0" && ($("#DpdwnYear").val()) % 4 === 0 && $("#DpdwnMonth").val() === "2") {
            if ($('#DpdwnDay :last').val() === "31") {
                $("option[value='30']").remove();
                $("option[value='31']").remove();
            }
            else if ($('#DpdwnDay :last').val() === "28") {
                var myOptions = { 29: '29' };
                $.each(myOptions, function (val, text) {
                    $('#DpdwnDay').append($('<option></option>').val(val).html(text));

                });
            }
            else if ($('#DpdwnDay :last').val() === "30") {
                $("option[value='30']").remove();
            }
        }

        else if ($("#DpdwnMonth").val() === "4" || $("#DpdwnMonth").val() === "6" || $("#DpdwnMonth").val() === "9" || $("#DpdwnMonth").val() === "11") {
            if ($('#DpdwnDay :last').val() === "31") {
                $("option[value='31']").remove();

            }
            else if ($('#DpdwnDay :last').val() === "29") {
                var myOptions = { 30: '30' };
                $.each(myOptions, function (val, text) {
                    $('#DpdwnDay').append($('<option></option>').val(val).html(text));

                });
            }
            else {
                var myOptions = { 29: '29', 30: '30' };
                $.each(myOptions, function (val, text) {
                    $('#DpdwnDay').append($('<option></option>').val(val).html(text));

                });
            }
        }
        else if ($("#DpdwnMonth").val() === "2") {
            $("option[value='29']").remove();
            $("option[value='30']").remove();
            $("option[value='31']").remove();

        }
        else {
            if ($('#DpdwnDay :last').val() === "28") {
                var myOptions = { 29: '29', 30: '30', 31: '31' };
                $.each(myOptions, function (val, text) {
                    $('#DpdwnDay').append($('<option></option>').val(val).html(text));
                });

            }
            else if ($('#DpdwnDay :last').val() === "29") {
                var myOptions = { 30: '30', 31: '31' };
                $.each(myOptions, function (val, text) {
                    $('#DpdwnDay').append($('<option></option>').val(val).html(text));
                });

            }
            else if ($('#DpdwnDay :last').val() === "30") {
                var myOptions = { 31: '31' };
                $.each(myOptions, function (val, text) {
                    $('#DpdwnDay').append($('<option></option>').val(val).html(text));
                });

            }

        }

    });

    $("#DpdwnDay").change(function () {
        if ($("#DpdwnYear").val() === "0" && $("#DpdwnDay").val() !== "0") {
            $("#DpdwnDay").val("0");
            alert("Select first year");
            return false;
        }

        if ($("#DpdwnMonth").val() === "0" && $("#DpdwnDay").val() !== "0") {
            $("#DpdwnDay").val("0");
            alert("Select first month");
            return false;

        }

    });
});