Question

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

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

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

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

还有其他办法吗？

Answer 1

我能获得最多的唯一方式最近选择的选项是比较选定的选项集在“改变”事件之前和之后。

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

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

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

Answer 2

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

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

在多个选择中获取最后一次单击的选项

2 个答案: