Ho la necessità di mostrare il DropDown (elemento di selezione HTML) inizialmente espanso quando viene caricato in modo che tutte le opzioni nel DropDown siano mostrate. Ho cercato un po ', ma sorprendentemente, non ho trovato una risposta a un problema così semplice. Sto usando ASP.NET MVC con jquery.Come mostrare il menu a discesa espanso automaticamente in modo che visualizzi tutte le opzioni quando la pagina è caricata
Si potrebbe scrivere nel codice HTML:
<select size="3" name="test" id="test">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
e poi via javascript impostare un timer che dopo un po 'cambia l'attributo dimensione casella di selezione su 1. Ad esempio alla fine della pagina (prima del tag body clsed) inserisci questo codice:
<script type="text/javascript">
window.setTimeout(function() { document.getElementById('test').size = 1; }, 5000); //5000 = 5 seconds
</script>
Questo è sufficiente per far sapere all'utente che l'elenco è popolato. Non funziona per me. Ma grazie per lo sforzo. – mohang
Ecco un po 'di mashup (che ha bisogno di modifiche e ottimizzazione), ma dovrebbe cominciare:
<div style="position:relative">
<select style="position: absolute">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
</select>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("select").one("focus", function() {
this.size = this.options.length;
}).one("click", function() {
this.size = 1;
}).one("blur", function() {
this.size = this.options.length;
}).focus();
});
</script>
Grazie per la soluzione. La soluzione sta funzionando, ma devo ridimensionare la dimensione con il clic del mouse da qualsiasi altra parte. Ma posso facilmente aggiungere questo. – mohang
@mohang - Ah, ho appena aggiunto un gestore di eventi 'blur' che è associato una volta usando' one' per farlo (che potrebbe essere un po 'più ordinato). – karim79
si potrebbe scrivere il codice HTML come questo
<html>
<select id="abc">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
</select>
</html>
Di seguito, è la funzioneJavaScript che si espande automaticamente.
<script type="text/javascript">
$(document).ready(function() {
var dropdown = document.getElementById("abc");
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropdown.dispatchEvent(event);
});
</script>
Vorrei che le persone scrivessero codice di esempio più generico, non tutti usano jQuery. –
La domanda dice "Sto usando ASP.NET MVC con jquery", ed è taggato "jquery" e il corpo della funzione è javascript generico. – mhanney
Soluzioni non dirette: 1) emettere la prima opzione "Seleziona il tuo paese .." o simili; 2) utilizzare i pulsanti di opzione. – chelmertz