How to make this work in all other browsers other than Firefox

Question

Hi

I have a select list with numbers in it. These numbers go from 0 to 30. I want to hide numbers based on the number of days apart from the current date and the date the user set.

So if today is July 28th 2010 and they Set July 29th 2010 it should only show "0".

If it was July 28th 2010 and they set September 20th 2010 it should show 0 to 30.

So I have this

  var selectedDate = new Date($('#TextBox').val().replace(/\/(\d\d)$/, "/20$1"));
    var currentDate = new Date();

    var month = currentDate.getMonth() + 1
    var day = currentDate.getDate()
    var year = currentDate.getFullYear()

    currentDate = new Date(month + "/" + day + "/" + year);


    if (isNaN(selectedDate) == false)
    {
        $('#selectList').find('select').attr('disabled', '');

        var diffDays = parseInt((selectedDate  - currentDate) / (1000 * 60 * 60 * 24));

        var Options = $('#selectList').find('option');

        jQuery.each(Options, function (i, value)
        {
            var currentValue = $(this).val();
            if (currentValue == -1)
            {
                // equal to continue;
                return true;
            }
            else if (currentValue >= diffDays)
            {
                $(this).hide();
            }
            else
            {
                $(this).show();
            }
        });
    }

This code happens on change of the textbox of where the user would select a date.

This works fine in FireFox but does not work in any other browser. I don't know why. No errors are shown in any of the browsers.

Answer 1

You simply can't hide/show <option> elements like this cross-browser, you need to either have a backup/hidden <select> and copy only the <option> elements you want each time, or just disable the <option> elements you don't want to be selectable, this will however leave them visible.

The cloning bit would look something like this:

var hiddenSelect = $("#selectList").find('select').clone();
var selectedDate = new Date($('#TextBox').val().replace(/\/(\d\d)$/, "/20$1"));
var currentDate = new Date();

var month = currentDate.getMonth() + 1
var day = currentDate.getDate()
var year = currentDate.getFullYear()

currentDate = new Date(month + "/" + day + "/" + year);


if (isNaN(selectedDate) == false) {
    $('#selectList').find('select').attr('disabled', '');
    var diffDays = parseInt((selectedDate  - currentDate) / (1000 * 60 * 60 * 24));

    var select = $('#selectList').find('select').empty();
    hiddenSelect.children().each(function(i, value) {
        if (value == -1) {
            return true;
        }
        else if (currentValue < diffDays) {
            $(this).clone().appendTo(select);
        }      
    });
}

We're just keeping a cloned copy of the original in a variable called hiddenSelect, emptying (via .empty()) out the options on the visible one in the UI, and looping through/cloning the options you want to see back into that visible select.