最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

cross browser - Simple javascript only working in FireFox - Stack Overflow

programmeradmin3浏览0评论

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

Share Improve this question edited Feb 3, 2009 at 11:00 Milan Babuškov 61.2k49 gold badges130 silver badges180 bronze badges asked Feb 3, 2009 at 10:29 Nick WoodhamsNick Woodhams 12.7k10 gold badges56 silver badges52 bronze badges
Add a ment  | 

6 Answers 6

Reset to default 5

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.

发布评论

评论列表(0)

  1. 暂无评论