¿Puedo abrir una lista desplegable usando jQuery?



Answers

Intentaba encontrar lo mismo y me decepcioné. Terminé cambiando el tamaño del atributo para el cuadro de selección para que parezca abrir

$('#countries').attr('size',6);

y luego cuando hayas terminado

$('#countries').attr('size',1);
Question

Para esta lista desplegable en HTML:

<select id="countries">
<option value="1">Country</option>
</select>

Me gustaría abrir la lista (lo mismo que hacer clic izquierdo sobre ella). ¿Es esto posible usando JavaScript (o más específicamente jQuery)?




Una cosa que esto no responde es lo que sucede cuando hace clic en una de las opciones en la lista de selección después de haber hecho su tamaño = n y lo ha convertido en un posicionamiento absoluto.

Como el evento de desenfoque lo convierte en tamaño = 1 y lo cambia a su aspecto, también debería tener algo como esto

$("option").click(function(){
    $(this).parent().blur();
});

Además, si tiene problemas con la lista de selección de posición absoluta que se muestra detrás de otros elementos, simplemente ponga un

z-index: 100;

o algo así en el estilo de la selección.




Como se ha indicado, no se puede abrir mediante programación una <select> usando JavaScript.

Sin embargo, podría escribir su propia <select> administrando todo el aspecto y la sensación usted mismo. Algo así como lo que ves para los términos de búsqueda de autocompletar en Google o Yahoo! o el cuadro Buscar ubicación en The Weather Network .

Encontré uno para jQuery here . No tengo idea de si satisfaría sus necesidades, pero incluso si no satisface completamente sus necesidades, debería ser posible modificarlo para que se abra como resultado de alguna otra acción o evento. Este realmente parece más prometedor.




Simple y fácil.

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
}

Ahora puede llamar a su DropDown así como este

<select onfocus="down(this)" onblur="up(this)">

Funciona perfecto para mi

Quizás sea mejor, porque no tienes problemas con la posición de los otros elementos en la página.

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");
}

Cambia la ID a un valor fijo, pero no es inteligente, pero espero que veas la idee.




Esto debería cubrirlo:

 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

Esto podría vincularse, por ejemplo, a un evento de pulsación de tecla, de modo que cuando el elemento tenga foco, el usuario puede escribir y se expandirá automáticamente ...

--Contexto--

  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);
 });



acabo de agregar

select = $('#' + id);
length = $('#' + id + ' > option').length;
if (length > 20)
    length = 20;
select.attr('size', length);
select.css('position', 'absolute');
select.focus();

y agregarlo a la selección

onchange="$(this).removeAttr('size');"
onblur="$(this).removeAttr('size');"

para hacer la misma apariencia que la clásica (superponer el resto de html)




No es posible que javascript haga "clic" en un elemento (puede activar el evento onclick adjunto, pero no puede hacer clic literalmente)

Para ver todos los elementos en la lista, haga que la lista sea una lista multiple y aumente su tamaño, como esta:

<select id="countries" multiple="multiple" size="10">
<option value="1">Country</option>
</select>



Related