Attivare un selezionato elemento modulo per mostrare le sue opzioni (aperto a discesa opzioni) con JavaScript

Question

Ecco l'markup

<select id="person_prefix" name="prefix"> 
<option value=""></option> 
<option value="Dr" selected="selected">Dr</option> 
<option value="Mr">Mr</option> 
<option value="Ms">Ms</option> 
<option value="Mrs">Mrs</option> 
</select> 

e voglio attivare un evento javascript in modo che l'elenco delle opzioni scende. Utilizzando jquery ho provato quanto segue:

$("#person_prefix").click(); 
$("#person_prefix").mousedown(); 
$("#person_prefix").change(); 

ma niente sembra funzionare. Quale evento è questo e come può essere attivato?

Grazie

Answer 1

Non è possibile eseguire questo browser a livello di codice. È possibile sostituire il menu a discesa con una soluzione interamente personalizzata in realtà non con a <select> elemento ... ma non è possibile visualizzarlo a livello di programmazione, soprattutto in IE.

Il più vicino si può fare è spostare l'utente all'elemento via .focus():

$("#person_prefix").focus(); 

questo con un certo stile CSS per quando è focalizzato (:focus) di solito è un buon modo per attirare l'attenzione esso.

Answer 2

Se si imposta l'attributo di dimensioni, la selezione visualizzerà il numero di opzioni specificato nella dimensione.

var sel= document.getElementsByName('select_1')[0]; 
var len= '10'// or sel.options.length; 
// safest: var len=sel.getElementsByTagName('*').length; 
sel.setAttribute('size',len) 

L'impostazione della dimensione su "1" riduce la selezione.

Answer 3

È non può innesco di eventi click su Seleziona elemento forma, ma la soluzione corretta è questo plugin:
jQuery.customSelect

Il grande vantaggio è che lancia il vero elemento select (in realtà si fa clic su un invisibile selezionare - opacity: 0), che è importante sui dispositivi mobili (ad esempio, iPhone ha il proprio layout per la visualizzazione delle opzioni select's).

Se non si desidera scaricare l'intero plug-in è possibile preparare la soluzione da soli poiché si sa come attivare il select (nasconderlo impostando opacity: 0 - sarà ancora cliccabile).

Answer 4

sulla base @ risposta di Kennebec, una versione jQuery per ottenere un conteggio delle opzioni e optgroups:

var sel = $('select.mySelectClass'); 
var count=0; 

sel.find('option').each(function() { 

    count++; 
}); 

sel.find('optgroups').each(function() { 

    count++; 
}); 

sel.attr('size',count); 

Answer 5

una volta sono stato a cercare come fare la stessa cosa e non ho trovato alcuna soluzione di lavoro, ma poi un ragazzo nel nostro gruppo javascript è venuto con un lavoro intelligente in giro. Ecco il codice.

HTML

<input type="button" id="show" value="show" /> 
<select id="myslect"> 
    <option>nothing</option> 
    <option>something</option> 
    <option>anything</option> 
</select> 

Javascript

$("#show").click(function() { 
    var element = $("select")[0], 
     worked = false; 
    if(document.createEvent) { // chrome and safari 
     var e = document.createEvent("MouseEvents"); 
     e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     worked = element.dispatchEvent(e); 
    } 
    if(!worked) { // unknown browser/error 
     alert("It didn't worked in your browser."); 
    } 
}); 

Non sono sicuro di come collegare al post gruppo in modo da poter vedere l'intero thread. In ogni caso crediti a CJ Madolara. Buon lavoro!

Aggiornamento:Funziona solo su Chrome e Safari