2010-04-25 6 views
21

Sto cercando un modo per determinare se/quando un menu di elemento <select> è aperto. Non ho bisogno di forzarlo per aprire o chiudere, basta capire se è aperto o chiuso in un dato momento.C'è un modo per determinare se un menu a discesa <select> è aperto?

Posso ascoltare gli eventi per messa a fuoco/sfocatura, mouse/mouse, ecc., Ma non penso di poter capire in modo affidabile lo stato del menu da quegli eventi. Ad esempio, il mouse seguito da mouseup potrebbe significare che l'utente ha fatto clic e trascinato su una selezione e rilasciato (nel qual caso il menu è ora chiuso) o fatto clic e rilasciato per aprire il menu (in tal caso il menu è aperto). Sembra anche probabile che il comportamento specifico dei menu a discesa dipende dal browser.

So che potrei farlo se apro il mio menu a discesa, ma preferisco usare <select>.

Esiste un modo affidabile per scoprire se un menu a discesa è aperto? O è qualcosa che Javascript non può sapere?

Conclusione: Non sembra esserci un modo garantito per determinare se un menu di selezione è aperto, sia chiedendo l'oggetto sia ascoltando gli eventi che viene attivato.

per mio uso Sono solo tenere traccia di se il SELECT ha fuoco con onfocus e onblur. Suppongo che non ci sia modo per il menu di essere aperto senza messa a fuoco, e questo sembra essere vero in tutti i browser che ho testato. In realtà non mi dice quando il menu è aperto, ma mi dice che quando è non è possibile aprire, che è abbastanza buono per i miei scopi.

risposta

3

si può giocare con mouseenter evento di selezionare elementi figlio option come si può entrare solo a loro se il menu di selezione è aperta, o anche con l'evento click sull'elemento select, di solito gettato quando lo si apre.

Per testare in un preciso momento se è aperto o no, non penso sia possibile.

+0

CRONACA - le versioni successive di IE aprire un menu elenco di selezione personalizzato, che non si attiva i soliti eventi. Essenzialmente quando apri un elenco di selezione il tuo mouse sta ora passando il mouse su qualcosa che non si riferisce al DOM – JDandChips

1

Gli elementi di selezione sono notoriamente complicati in Internet Explorer. Non penso che esista un modo per determinare in modo affidabile se uno è aperto o chiuso.

0

Posso vedere se la selezione è aperta, e quindi quando si chiude se l'utente seleziona una nuova opzione, o sfuma completamente la selezione. Tuttavia, se si fa clic sulla stessa opzione, o si fa semplicemente clic fuori dal select una volta (chiudendolo ma non sfocandolo), viene comunque visualizzato "down". Lavorando su una soluzione più completa. Quindi, si aspettano questa risposta abbia modifiche ...

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script type="text/javascript"> 
    var selected 
$(document).ready(


function() 
{ 
    $('#test') 
     .mousedown(function(){ console.log('down'); selected = $(this).val() }) 
     .blur(function(){ console.log('out') }) 
     .change(function(){ console.log('out') }) 
     .mouseleave(function(){ console.log('out') }) 
     .mouseup(function(){ 
     if($(this).val() == selected) 
      console.log('out') 
    } 
    ) 
} // function 

) // ready 
</script> 

<select id="test"> 
<option>1</option> 
<option>2</option> 
</select> 

Edit: aggiunto mouseout

Edit2: aggiunto mouseup - ora funziona!

+0

Penso che questo funzioni ora .. A volte registra "out" più di una volta. Penso che l'unico scenario che non sto trattando sia aprire la selezione, scegliere l'opzione selezionata e non spostare il mouse. E c'è dell'altro! – hookedonwinter

+0

Modifica recente .. funziona ora! – hookedonwinter

+0

Non sono sicuro di cosa dovrebbe fare.Quando faccio clic e rilascio sul menu, viene registrato "down" e "out". Ma il menu è ancora aperto. Sembra che tu stia solo ascoltando gli eventi che ho menzionato, ma usando jquery per qualche motivo. Mi sto perdendo qualcosa? – Robert

-1

una soluzione più completa sarebbe:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script type="text/javascript"> 
var selected,selected2 
$(document).ready(


function() 
{ 
    $('select[id$="test"]') 
     .mousedown(function(){ 
     console.log('predown'); 
     if($(this).val() != selected) { 
      console.log('down'); 
      selected = $(this).val(); 
      selected2=null;} 
     else 
      selected=null;}) 
     .blur(function(){ if (selected2==selected) { 
     console.log('outb'); 
     selected=null; 
     selected2=null;} }) 
     .mouseup(function(){ console.log('preoutu'); 
     if($(this).val() != selected || $(this).val() == selected2) { 
      console.log('outu'); 
      selected=null; 
      selected2=null; 
     } 
     else 
      selected2=$(this).val(); 
    } 
    ) 
} // function 

) // ready 
</script> 


<select id="1test"> 
<option>1</option> 
<option>2</option> 
</select> 
<select id="2test"> 
<option>1</option> 
<option>2</option> 
</select>