J'ai besoin de montrer le DropDown (élément de sélection HTML) développé initialement lorsqu'il est chargé afin que toutes les options dans le DropDown soient affichées. J'ai cherché un peu, mais étonnamment, je n'ai pas trouvé de réponse à un problème aussi simple. J'utilise ASP.NET MVC avec jquery.Comment afficher la liste déroulante développée automatiquement afin qu'elle affiche toutes les options lorsque la page est chargée
Vous pouvez écrire dans votre code HTML:
<select size="3" name="test" id="test">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
puis via javascript régler une minuterie Après cela, change l'attribut de taille de zone de sélection à 1. Par exemple, à la fin de votre page (avant l'étiquette de corps clsed), placez ce code:
<script type="text/javascript">
window.setTimeout(function() { document.getElementById('test').size = 1; }, 5000); //5000 = 5 seconds
</script>
Ceci est suffisant pour informer l'utilisateur que la liste est remplie. Ne fonctionne pas pour moi. Mais merci pour l'effort. – mohang
est ici un peu mashup (qui a besoin de peaufinage et d'optimisation) mais devrait vous aider à démarrer:
<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>
Merci pour la solution. La solution fonctionne mais je dois redéfinir la taille en cliquant sur la souris n'importe où ailleurs. Mais je peux facilement ajouter cela. – mohang
@mohang - Ah, je viens d'ajouter un gestionnaire d'événement 'blur' qui est lié une fois en utilisant' one' pour le faire (ce qui pourrait être un peu plus net). – karim79
Vous pouvez écrire votre HTML comme celui-ci
<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>
Ci-dessous, le JAVASCRIPT Fonction qui augmente automatiquement.
<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>
J'aimerais que les gens écrivent un exemple de code plus générique, tout le monde n'utilise pas jQuery. –
La question dit, "J'utilise ASP.NET MVC avec jquery", et il est étiqueté 'jquery' et le corps de la fonction est javascript générique. – mhanney
Solutions non-directes: 1) faire crier la première option "Sélectionnez votre pays .." ou similaire; 2) utilisez des boutons radio. – chelmertz