Question

我对某些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节点。

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

Answer 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')

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

1 个答案: