Javascript + Prototype：我可以检索使用 onChange 事件单击的列表选项吗？答案

【问题标题】：Javascript + Prototype: Can I retrieve list option clicked with the onChange event?Javascript + Prototype：我可以检索使用 onChange 事件单击的列表选项吗？
【发布时间】：2011-03-05 03:12:47
【问题描述】：

我对一些 JS 有点困难。

我有一个列表，我只想选择最多 10 个项目。我遇到的困难是，如果通过鼠标拖动进行多项选择，则不会触发 onClick 事件 - 所以我必须使用 onChange。

但是，使用 onChange - 我无法选择最后一个选项，因为我认为 DOM 在事件中不支持它。这是一个例子：

HTML：

<select id="mylist"><option>Test</option>  
<option>Test</option>
<option>Test</option>
<option>Test</option>
</select>

JS：

Event.observe('mylist', 'change', checkList);

function checkList(e)
{
    var count = 0;
    var listObj = this;
    // Count selected items
    for (i=0; i < listObj.options.length; i++) {
        if (listObj.options[i].selected) {
            count++;
        }
    }

    // If the count is over, tell me the last selected item
    if (count > 10) {
        var e = e || window.event;
        var tgt = e.target || e.srcElement;
        alert(tgt.nodeName + ' Index:' + tgt.index);
    }
}

如果我使用onClick 事件，那么我会得到“OPTION - Index 1”。但是使用 onChange 我得到了 SELECT 节点。

有没有办法可以可靠地获得点击的选项？

【问题讨论】：

标签： javascript prototypejs dom-events

【解决方案1】：

如果你只是将逻辑放在 for 循环中呢？

function checkList(e)
{
    var count = 0;
    var listObj = this;
    // Count selected items
    for (i=0; i < listObj.options.length; i++) {
        if (listObj.options[i].selected) {
           // If the count is over, tell me the last selected item
           if (++count > 10) {
               alert('Index:' + i);
               return;
           }
        }
    }

}

甚至更好：

保持你的逻辑并使用选择器来获取最后选择的选项：

$$('select#mylist option[selected]:last')

【讨论】：