Puis-je ouvrir une liste déroulante à l'aide de jQuery
Pour cette liste déroulante en HTML:
<select id="countries">
<option value="1">Country</option>
</select>
Je voudrais ouvrir la liste (le même que cliquer-dessus). Est-ce possible d'utiliser JavaScript (ou plus précisément jQuery)?
Vous pouvez facilement simuler un clic sur un élément , mais un clic sur un <select> n’ouvre pas la liste déroulante.
Utiliser plusieurs sélections peut être problématique. Peut-être devriez-vous envisager des boutons radio à l'intérieur d'un élément conteneur que vous pouvez développer et contracter si nécessaire.
J'essayais de trouver la même chose et j'ai été déçu ... J'ai fini par changer la taille de l'attribut pour la zone de sélection afin qu'elle apparaisse à s'ouvrir
$('#countries').attr('size',6);
et puis quand vous avez fini
$('#countries').attr('size',1);
J'ai rencontré le même problème et j'ai une solution. Une fonction appelée ExpandSelect () émule un clic de souris sur l'élément "select". Pour ce faire, il crée un autre élément <select> parfaitement présenté et doté de plusieurs options visibles en même temps en définissant l'attribut size. Testé dans tous les principaux navigateurs: Chrome, Opera, Firefox, Internet Explorer. Explication de la façon dont cela fonctionne, avec le code ici:
Edit (le lien était cassé).
J'ai créé un projet sur Google Code, recherchez le code ici:
http://code.google.com/p/expandselect/
Captures d'écran
Il y a une petite différence dans l'interface graphique lors de l'émulation de click, mais cela n'a pas vraiment d'importance, voyez-le vous-même:
En cliquant avec la souris:
Clic de souris http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg
Lorsque vous émulez, cliquez sur:
EmulationCliquer http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg
Plus de captures d'écran sur le site du projet, lien ci-dessus.
Cela devrait couvrir:
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
countries.dispatchEvent(event); //we use countries as it's referred to by ID - but this could be any JS element var
Cela peut être lié, par exemple, à un événement de frappe au clavier. Ainsi, lorsque l'élément est activé, l'utilisateur peut le saisir et il se développera automatiquement ...
--Le contexte--
modal.find("select").not("[readonly]").on("keypress", function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
this.dispatchEvent(event);
});
Ceci est résumée dans les réponses ci-dessus et utilise la longueur/le nombre d'options pour se conformer au nombre d'options réellement disponibles.
J'espère que cela aide quelqu'un à obtenir les résultats dont il a besoin!
function openDropdown(elementId) {
function down() {
var pos = $(this).offset(); // remember position
var len = $(this).find("option").length;
if(len > 20) {
len = 20;
}
$(this).css("position", "absolute");
$(this).css("zIndex", 9999);
$(this).offset(pos); // reset position
$(this).attr("size", len); // open dropdown
$(this).unbind("focus", down);
$(this).focus();
}
function up() {
$(this).css("position", "static");
$(this).attr("size", "1"); // close dropdown
$(this).unbind("change", up);
$(this).focus();
}
$("#" + elementId).focus(down).blur(up).focus();
}
Simple et facile.
function down(what) {
pos = $(what).offset(); // remember position
$(what).css("position","absolute");
$(what).offset(pos); // reset position
$(what).attr("size","10"); // open dropdown
}
function up(what) {
$(what).css("position","static");
$(what).attr("size","1"); // close dropdown
}
Maintenant, vous pouvez appeler votre DropDown comme ça
<select onfocus="down(this)" onblur="up(this)">
Fonctionne parfaitement pour moi.
Peut-être mieux, car vous n’avez aucun problème avec la position des autres éléments sur la page.
function down(was) {
a = $(was).clone().attr('id','down_man').attr('disabled',true).insertAfter(was);
$(was).css("position","absolute").attr("size","10");
}
function up(was) {
$('#down_man').remove();
$(was).css("position","static");
$(was).attr("size","1");
}
Changer l'ID pour une valeur fixe mybe pas intelligent mais j'espère que vous voyez l'idée.
Il n'est pas possible pour javascript de "cliquer" sur un élément (vous pouvez déclencher l'événement onclick attaché, mais vous ne pouvez pas cliquer dessus)
Pour afficher tous les éléments de la liste, faites-en une liste multiple et augmentez-en la taille, comme ceci:
<select id="countries" multiple="multiple" size="10">
<option value="1">Country</option>
</select>
Super simple:
var state = false;
$("a").click(function () {
state = !state;
$("select").prop("size", state ? $("option").length : 1);
});
Non tu ne peux pas.
Vous pouvez modifier la taille pour l'agrandir ... comme dans l'idée de Dreas, mais c'est la taille que vous devez modifier.
<select id="countries" size="6">
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
<option value="4">Country 4</option>
<option value="5">Country 5</option>
<option value="6">Country 6</option>
</select>
Une chose à laquelle cela ne répond pas, c’est ce qui se produit lorsque vous cliquez sur l’une des options de la liste de sélection une fois que vous avez défini votre taille = n et défini le positionnement absolu.
Étant donné que l'événement flou lui donne une taille égale à 1 et qu'il redevient comme il se doit, vous devriez avoir quelque chose comme ça
$("option").click(function(){
$(this).parent().blur();
});
En outre, si vous rencontrez des problèmes avec la liste de sélection positionnée de manière absolue, qui apparaît derrière d’autres éléments, il suffit de mettre un
z-index: 100;
ou quelque chose comme ça dans le style de la sélection.
J'ai essayé d'utiliser la réponse de mrperfect et j'ai eu quelques problèmes. Avec quelques petits changements, j'ai pu le faire fonctionner pour moi. Je viens de le changer pour qu'il ne le fasse qu'une fois. Une fois que vous avez quitté la liste déroulante, cela revient à la méthode habituelle.
function down() {
var pos = $(this).offset(); // remember position
$(this).css("position", "absolute");
$(this).offset(pos); // reset position
$(this).attr("size", "15"); // open dropdown
$(this).unbind("focus", down);
}
function up() {
$(this).css("position", "static");
$(this).attr("size", "1"); // close dropdown
$(this).unbind("change", up);
}
function openDropdown(elementId) {
$('#' + elementId).focus(down).blur(up).focus();
}
Comme indiqué précédemment, vous ne pouvez pas ouvrir par programmation un <select> à l'aide de JavaScript.
Cependant, vous pouvez écrire votre propre <select> en gérant vous-même votre apparence. Quelque chose comme ce que vous voyez pour les termes de recherche à complétion automatique sur Google ou Yahoo! ou la zone Rechercher un lieu à The Weather Network .
J'ai trouvé un pour jQuery ici . Je ne sais pas si cela répondrait à vos besoins, mais même si cela ne répondait pas complètement à vos besoins, il devrait être possible de le modifier pour qu'il s'ouvre à la suite d'une autre action ou d'un autre événement. Celui-ci semble en fait plus prometteur.
Peut-être tard, mais voici comment je l'ai résolu: http://jsfiddle.net/KqsK2/18/
$(document).ready(function() {
fixSelect(document.getElementsByTagName("select"));
});
function fixSelect(selectList)
{
for (var i = 0; i != selectList.length; i++)
{
setActions(selectList[i]);
}
}
function setActions(select)
{
$(select).click(function() {
if (select.getElementsByTagName("option").length == 1)
{
active(select);
}
});
$(select).focus(function() {
active(select);
});
$(select).blur(function() {
inaktiv(select);
});
$(select).keypress(function(e) {
if (e.which == 13) {
inaktiv(select);
}
});
var optionList = select.getElementsByTagName("option");
for (var i = 0; i != optionList.length; i++)
{
setActionOnOption(optionList[i], select);
}
}
function setActionOnOption(option, select)
{
$(option).click(function() {
inaktiv(select);
});
}
function active(select)
{
var temp = $('<select/>');
$('<option />', {value: 1,text:$(select).find(':selected').text()}).appendTo(temp);
$(temp).insertBefore($(select));
$(select).attr('size', select.getElementsByTagName('option').length);
$(select).css('position', 'absolute');
$(select).css('margin-top', '-6px');
$(select).css({boxShadow: '2px 3px 4px #888888'});
}
function inaktiv(select)
{
if($(select).parent().children('select').length!=1)
{
select.parentNode.removeChild($(select).parent().children('select').get(0));
}
$(select).attr('size', 1);
$(select).css('position', 'static');
$(select).css({boxShadow: ''});
$(select).css('margin-top', '0px');
}
je viens d'ajouter
select = $('#' + id);
length = $('#' + id + ' > option').length;
if (length > 20)
length = 20;
select.attr('size', length);
select.css('position', 'absolute');
select.focus();
et ajouter dans la sélection
onchange="$(this).removeAttr('size');"
onblur="$(this).removeAttr('size');"
faire la même apparence que le classique