I created a script that requires selecting a beginning year then only displays years from that Beginning year -> 2009. It's just a startYear to endYear Range selector.

The script only works in firefox. I'm LEARNING javascript, so I'm hoping someone can point me into the right direction. Live script can be found at

<script type="text/javascript">
function display_year2(start_year) {
//alert(start_year);
if (start_year != "Any") {
    var i;
    for(i=document.form.year2.options.length-1;i>=0;i--)
    {
        document.form.year2.remove(i);
    }

    var x = 2009;
    while (x >= start_year) {
        var optn = document.createElement("OPTION");
        optn.text = x;
        optn.value = x;
        document.form.year2.options.add(optn);
        //alert(x);
        x--;
    }
}
else 
{
    var i;
    for(i=document.form.year2.options.length-1;i>=0;i--)
    {
        document.form.year2.remove(i);
    }
    var optn = document.createElement("OPTION");
    optn.text = "Any";
    optn.value = "Any";
    document.form.year2.options.add(optn);
} // end else
} // end function
</script>

Any ideas?

Thanks, Nick

I created a script that requires selecting a beginning year then only displays years from that Beginning year -> 2009. It's just a startYear to endYear Range selector.

The script only works in firefox. I'm LEARNING javascript, so I'm hoping someone can point me into the right direction. Live script can be found at http://motolistr.

<script type="text/javascript">
function display_year2(start_year) {
//alert(start_year);
if (start_year != "Any") {
    var i;
    for(i=document.form.year2.options.length-1;i>=0;i--)
    {
        document.form.year2.remove(i);
    }

    var x = 2009;
    while (x >= start_year) {
        var optn = document.createElement("OPTION");
        optn.text = x;
        optn.value = x;
        document.form.year2.options.add(optn);
        //alert(x);
        x--;
    }
}
else 
{
    var i;
    for(i=document.form.year2.options.length-1;i>=0;i--)
    {
        document.form.year2.remove(i);
    }
    var optn = document.createElement("OPTION");
    optn.text = "Any";
    optn.value = "Any";
    document.form.year2.options.add(optn);
} // end else
} // end function
</script>

Any ideas?

Thanks, Nick

• javascript
• cross-browser

6 Answers 6

You are trying to set an onclick event on each option. IE does not support this. Try using the onchanged event in the select element instead.

Instead of this:

<select name="year1" id="year1">
    <option value="Any" onclick="javascript:display_year2('Any');" >Any</option>
    <option value="2009" onclick="javascript:display_year2(2009);" >2009</option>
    <option value="2008" onclick="javascript:display_year2(2008);" >2008</option>
</select>

Try this:

<select name="year1" id="year1" onchange="javascript:display_year2(this.options[this.selectedIndex].value)">
    <option value="Any">Any</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
</select>

The reason it doesn't work isn't in your code snippet:

<OPTION onclick=javascript:display_year2(2009); value=2009>

Option.onclick is not an event that is generally expected to fire, but does in Firefox. The usual way to detect changes to Select values is via Select.onchange.

Also, you do not need to include "javascript:" in event handlers, they are not URLs (also, never ever use javascript: URLs). Also, quote your attribute values; it's always a good idea and it's required when you start including punctuation in the values. Also, stick to strings for your values - you are calling display_year2 with a Number, but option.value is always a String; trying to work with mixed datatypes is a recipe for confusion.

In summary:

<select onchange="display_year2(this.options[this.selectedIndex].value)">
    <option value="2009">2009</option>
    ...
</select>

Other things:

var i;
for(i=document.form.year2.options.length-1;i>=0;i--)
{
document.form.year2.remove(i);
}

You can do away with the loop by writing to options.length. Also it's best to avoid referring to element names directly off documents - use the document.forms[] collection or getElmentById:

var year2= document.getElementById('year2');
year2.options.length= 0;

Also:

var optn = document.createElement("OPTION");
optn.text = x;
optn.value = x;
document.form.year2.options.add(optn);

HTMLCollection.add is not a standard DOM method. The traditional old-school way of doing it is:

year2.options[year2.options.length]= new Option(x, x);

I was having similar problems with onchange working in Firefox but not IE and sometime not Chrome. I added below in my Head tag and all was well (Put in meta tag: I had to strip off tag stuff for this note so it would show up) meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"

Note: What this does is: Always force latest IE rendering engine (even in intranet) & Chrome Frame BUT: Remove this if you use the .htaccess

Googling around i found some thing about a problem with createElement in IE: http://webbugtrack.blogspot./2007/10/bug-235-createelement-is-broken-in-ie.html

There is also a link to a page with a workaround. Hope this helps you.

Although it is not a solution to your problem; you're referring to your input field the incorrect way: document.form.year2 should be document.getElementById('year2'). I also noticed that your current script works in Opera.

Try setting the length manually.

document.form.year2.options.length = number_of_items.