Получить последний нажатый вариант в множественном выборе - PullRequest
6 голосов
/ 16 февраля 2010

На странице у меня есть поле выбора (несколько) с множеством опций. Теперь я хочу отреагировать на последний нажатый элемент, чтобы отобразить некоторые данные с помощью ajax.

Поскольку событие «click» в элементе option не работает в IE, в настоящее время я использую событие «change».

Проблема в том, что «значение» и атрибут selectedIndex указывают на первый выбранный элемент, даже если я выбираю другие параметры, следующие за первым.

Единственный способ получить последний выбранный параметр - сравнить набор выбранных параметров до и после события «change».

Есть ли другой способ?

Ответы [ 2 ]

2 голосов
/ 17 февраля 2010

Единственный способ получить последний выбранный вариант - сравнить набор выбранных параметров до и после события «изменение».

Это, вероятно, ваш лучший выбор -ie не собирается сообщать о событиях кликов по отдельным опциям (он будет только сообщать о кликах в окне выбора).

Если вы действительно хотите выяснить, какая опция была нажата (при прослушивании кликов в самом окне выбора)), вы можете посмотреть на свойство offsetY объекта события (которое будет вертикальным смещением курсора мыши относительно вершины первого параметра в поле выбора - таким образом, оно включает смещение прокрутки блока выбора),и разделите его на заранее заданный размер параметра (который будет зависеть от размера шрифта поля выбора).

Но, очевидно, это не поможет, когда пользователь выбирает параметры с помощью клавиатуры.

1 голос
/ 23 февраля 2010

Следующий код не идеален.Я думаю, что это не совсем корректно работает в 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>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...