在多选中获取最后点击的选项答案

【问题标题】：Get last clicked option in multiple select在多选中获取最后点击的选项
【发布时间】：2011-01-17 13:54:06
【问题描述】：

在一个页面上，我有一个包含许多选项的选择（多个）框。现在我想对最后点击的项目做出反应，用 ajax 显示一些数据。

由于选项元素上的“点击”事件在IE中不起作用，我目前使用“更改”事件。

问题是，“值”和 selectedIndex 属性指向第一个选定的项目，即使我选择了第一个之后的其他选项。

我可以获得最近选择的选项的唯一方法是比较“更改”事件之前和之后的一组选定选项。

还有其他方法吗？

【问题讨论】：

如果给select添加一个click监听器，看看事件的target，会不会是select？如果可以的话，也许这会让你做你想做的事。
谢谢，但我已经尝试过了。事件中没有提及该选项。

标签： javascript html events select

【解决方案1】：

我能获得最大收益的唯一方法最近选择的选项是比较一组选定的选项 “更改”事件之前和之后。

这可能是您最好的选择——即不会报告单个选项的点击事件（它只会报告选择框上的点击）。

如果你真的想知道点击了哪个选项（当监听选择框本身的点击时），你可以查看事件对象的offsetY属性（这将是鼠标光标的垂直偏移量相对于选择框中第一个选项的顶部——因此它包括选择框的滚动偏移量），然后除以您预先确定的选项大小（这将取决于选择框的字体大小）。

但显然，当用户通过键盘选择选项时，这对您没有帮助。

【讨论】：

【解决方案2】：

以下代码并不完美。我认为它在 IE6 中不能完全正常工作，但在 IE7-8、Firefox、Safari(Win)、Opera 和 Chrome 中很好。它只记录最后一次单击以选择一个值，因此取消选择最后一次选择的值而不选择另一个值仍会返回最后一次选择（现在未选择）的索引。如果你需要的话，我会让你来处理......

<html>
<head>
    <title>Multiple selection indices attribute</title>
    <script type='text/JavaScript'>
        function oc(a) {var o={};for (var i=0;i<a.length;i++) {o[a[i]]='';}; return o;};

        function getIndices(ele) 
                {if (!ele.prevSelected) {ele.prevSelected=new Array();}

                 ele.selectedIndices=new Array();

                 while (ele.selectedIndex != -1) 
                    {ele.selectedIndices.push(ele.selectedIndex);

                   if (ele.selectedIndex in oc(ele.prevSelected))   {null;}
                   else {ele.newIndex = ele.selectedIndex;}

                     ele.options[ele.selectedIndex].selected = false;
                    };

                 for (var i=0;i<ele.selectedIndices.length;i++) 
                    {ele.options[ele.selectedIndices[i]].selected = true;};

                 ele.prevSelected=new Array();

                 if (ele.selectedIndices)   
                    {for (var i=0;i<ele.selectedIndices.length;i++) 
                        {ele.prevSelected.push(ele.selectedIndices[i]);}
                    }
                };

            function display(ele)   {if (ele.newIndex) {alert('Last selection: '+ele.newIndex);}};

    </script>
</head>
<body onload='getIndices(document.getElementById("mine"));'>
    <select multiple='multiple' id='mine' size='10' onclick='getIndices(this);'>
        <option value='A'> 0</option><option value='B'> 1</option>
        <option value='C'> 2</option><option value='D'> 3</option>
        <option value='E'> 4</option><option value='F'> 5</option>
        <option value='G'> 6</option><option value='H'> 7</option>
        <option value='I'> 8</option><option value='J'> 9</option>
        <option value='K'>10</option><option value='L'>11</option>
        <option value='M'>12</option><option value='N'>13</option>
        <option value='O'>14</option><option value='P'>15</option>
    </select>
    <input type='button' value='Show' onclick='display(document.getElementById("mine"));' />
</body>

【讨论】：