Question

I am trying to hide and show tags in a dropdown list, which I initially managed to get work in everything bar Internet Explorer. I then found that wrapping the options that needed to be hidden in tags solved the IE problem. But i’m now having an issue with removing them, because the code that I have written also removes the dropdown that they are contained in. What am I doing wrong? Here is the code so far:

function GetMonthsForSelectedYear() {
    var selectedYear = $("#DropDownListYear option:selected").text(),
        currentYear = (new Date()).getFullYear(),
        currentMonth = (new Date()).getMonth() + 1;

    $("#DropDownListMonth option").each(function() {
        if (selectedYear == currentYear) {
            var option = $(this).index();
            if (option < currentMonth) {
                $(this).wrap('<span>').hide();
            }
        } else {
            $(this).unwrap("<span>").show();
        }
    });
}

$("#DropDownListYear").change(function() {
   GetMonthsForSelectedYear();
});​

And here is is in JSFiddle:

http://jsfiddle.net/MGGh9/1/

Thanks.

Answer 1

Instead you can just use this:

$("#DropDownListMonth option[value=" + title + "]").hide();

When you wrap a <span>, it wraps the whole <select>, not just that <option>. And this is an expected behaviour. Moreover, it is not a right way to have anything other than option or optgroup inside a select tag.

In your code:

function GetMonthsForSelectedYear() {
    var yearOfEntry = $("#DropDownListYear option:selected").text(),
        currentYear = (new Date()).getFullYear(),
        currentMonth = (new Date()).getMonth() + 1;

    $("#DropDownListMonth option").each(function() {
        if (yearOfEntry == currentYear) {
            var option = $(this).index();
            if (option < currentMonth) {
                $(this).hide();               // «--------- This one
            }
        } else {
            $(this).show();                   // «--------- This one
        }
    });
}

$("#DropDownListYear").change(function() {
   GetMonthsForSelectedYear();
});​

Fiddle: http://jsfiddle.net/MGGh9/2/

Also Check:

1. How to hide a <option> in a <select> menu with CSS?
2. How can I hide select options with JavaScript? (Cross browser)