2010-02-16 10 views
6

En una página, tengo un cuadro de selección (múltiple) con muchas opciones. Ahora quiero reaccionar sobre el último elemento seleccionado para mostrar algunos datos con ajax.Obtener la última opción cliqueada en múltiple seleccione

Como el evento "hacer clic" en el elemento de opción no funciona en IE, actualmente uso el evento "cambiar".

El problema es que el "valor" y el atributo selectedIndex apuntan al primer elemento seleccionado, incluso si selecciono otras opciones después del primero.

La única forma en que pude obtener la opción seleccionada más recientemente es mediante la comparación del conjunto de opciones seleccionadas antes y después del evento "cambiar".

¿Hay alguna otra manera?

+0

Si añade un detector de clics a la selección, y mirar a la meta del evento, será el selecto? Si es la opción, quizás eso le permita hacer lo que quiera. – levik

+1

Gracias, pero ya lo intenté. No hay referencia a la opción en el evento. – Wikser

Respuesta

2

La única manera de que pudiera obtener el opción más recientemente seleccionada es por comparar el conjunto de opciones seleccionadas antes y después del evento "cambio".

Esa es probablemente su mejor opción, es decir, no informará los eventos de clic en las opciones individuales (solo informará los clics en el cuadro de selección).

Si realmente desea saber en qué opción se hizo clic (al escuchar los clics en el cuadro de selección), puede mirar la propiedad offsetY del objeto de evento (que será el desplazamiento vertical del cursor del mouse relativo a la parte superior de la primera opción en el cuadro de selección, por lo que incluye el desplazamiento de desplazamiento del cuadro de selección), y divídalo por el tamaño de opción predeterminado (que dependerá del tamaño de fuente del cuadro de selección).

Pero, obviamente, eso no lo ayudará cuando el usuario seleccione las opciones mediante el teclado.

1

El siguiente código no es perfecto. Creo que no funciona del todo bien en IE6, pero está bien en IE7-8, Firefox, Safari (Win), Opera & Chrome. Solo registra el último clic para seleccionar un valor, por lo que al desmarcar un valor que fue el último seleccionado sin seleccionar otro, se devuelve el último índice seleccionado (ahora no seleccionado). Voy a dejar que usted resuelva que si necesita ...

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

Cuestiones relacionadas