简单的javascript只能在FireFox中使用

Question

我创建了一个脚本，需要选择一个开始年份，然后只显示从开始年份开始的年份 - > 2009年。它只是一个startYear to endYear Range选择器。

该脚本仅适用于Firefox。 我正在学习javascript，所以我希望有人能指出我正确的方向。 可以在http://motolistr.com找到实时脚本

<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>

有任何想法吗？

谢谢，尼克

Answer 1

您正尝试在每个选项上设置onclick事件。 IE不支持这一点。 请尝试使用select元素中的onchanged事件。

而不是这个：

<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>

尝试这个：

<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>

Answer 2

它不起作用的原因不在您的代码段中：

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

Option.onclick不是通常预期会触发的事件，但在Firefox中也是如此。 检测Select值更改的常用方法是通过Select.onchange。

此外，您不需要在事件处理程序中包含“javascript：”，它们不是URL（也是，永远不会使用javascript：URL）。 另外，引用您的属性值; 这总是一个好主意，当你开始在值中加入标点时，它是必需的。 另外，坚持使用您的值的字符串 - 您使用Number调用display_year2，但option.value始终是String; 尝试使用混合数据类型是一种混淆的方法。

综上所述：

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

其他事情：

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

您可以通过写入options.length来取消循环。 另外，最好避免直接从文档引用元素名称 - 使用document.forms []集合或getElmentById：

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

也：

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

HTMLCollection.add不是标准的DOM方法。 传统的老派做法是：

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

Answer 3

我在Firefox中使用onchange时遇到了类似的问题，但不是IE，有时候不是Chrome。 我在Head标签中添加了以下内容并且一切都很好（放入元标记：我必须删除此注释的标记内容以便显示）meta http-equiv =“X-UA-Compatible”content =“IE =边缘，铬= 1"

注意：它的作用是：始终强制使用最新的IE渲染引擎（即使在Intranet中）和Chrome框架但是：如果使用.htaccess，请将其删除

Answer 4

谷歌搜索我发现IE中的createElement问题： http ：//webbugtrack.blogspot.com/2007/10/bug-235-createelement-is-broken-in-ie.html

还有一个指向具有变通方法的页面的链接。 希望这对你有所帮助。

Answer 5

虽然它不是你问题的解决方案; 你用不正确的方式引用你的输入字段： document.form.year2应该是document.getElementById('year2') 。 我还注意到你当前的脚本在Opera中运行。

Answer 6

manually. 尝试手动设置 。

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