Javascript:事件处理程序在选择选项(IE)中不起作用

时间:2015-09-18 12:09:28

标签: javascript internet-explorer event-handling html-select

当我在select选项中绑定事件处理程序时,此事件处理程序调用的函数在Internet Explorer中不起作用(在Chrome,Firefox和Safari中完美运行)。

这是代码,非常简单:

<select onmousedown="display_options(this, 10);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>

<script type="text/javascript">

function display_options(this_select, size)
{   

    /*If the select size is greater than size parameter, apply size parameter to the select :*/
    if(this_select.length > size)
    {
        this_select.size = size;

        /*Position absolute to simulate a classic select :*/
        this_select.style.position = "absolute";
    }

    /*When clicking in an option, come back to size 0 for the select. Works perfectly in Chrome, Firefox, Safari, but doesn't work in IE :*/
    for(var i = 0; i < this_select.options.length; i++)
    {           
            this_select.options[i].onclick = function(event)
            {
                this_select.size = 0;
            };          
    }

    /*When clicking outside the select, come back to size 0 for the select :*/
    this_select.onblur = function()
    {
        this_select.size = 0;
    };
}

在此代码中,这是this_select.options[i].onclick = function(event){...}在IE中不起作用,因为选项列表不会返回到大小为0.

你有个主意吗?您可以尝试使用以下代码:https://jsfiddle.net/4hck3vo0/

提前谢谢你,亲切。

1 个答案:

答案 0 :(得分:0)

我猜测Internet Explorer正在做一些古怪的事情。但为什么你使用onmousedown和onclick?如果您没有使用它们的具体原因,我建议您使用onChange属性。有关详细信息,请参阅http://www.w3schools.com/jsref/event_onchange.asp