jquery div - ¿Puedo abrir una lista desplegable usando jQuery?




7 Answers

Puede simular fácilmente un clic en un elemento , pero al hacer clic en <select> no se abrirá el menú desplegable.

Usar selecciones múltiples puede ser problemático. Quizás debería considerar botones de opción dentro de un elemento contenedor que puede expandir y contraer según sea necesario.

html javascript

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)?




He encontrado el mismo problema y tengo una solución. Una función llamada ExpandSelect () que emula el mouse haciendo clic en el elemento "seleccionar", lo hace creando otro elemento <select> que está posionado por completo y tiene varias opciones visibles al mismo tiempo configurando el atributo de size . Probado en todos los principales navegadores: Chrome, Opera, Firefox, Internet Explorer. Explicación de cómo funciona, junto con el código aquí:

Editar (el enlace estaba roto) .

Creé un proyecto en Google Code, busque el código allí:

http://code.google.com/p/expandselect/

Capturas de pantalla

Hay una pequeña diferencia en la GUI al emular el clic, pero realmente no importa, véalo usted mismo:

Cuando el mouse hace clic:

MouseClicking http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg

Al emular, haga clic en:

EmulatingClicking http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg

Más capturas de pantalla en el sitio web del proyecto, enlace arriba.




Esto está arreglado a partir de las respuestas que acabamos de ver y usa la longitud / número de opciones para ajustarse a la cantidad de opciones que realmente existen.

Espero que esto ayude a alguien a obtener los resultados que necesita.

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



No, no puedes.

Puede cambiar el tamaño para hacerlo más grande ... similar a la idea de Dreas, pero es el tamaño que necesita cambiar.

<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>



Intenté usar la respuesta de mrperfect y tuve algunas fallas técnicas. Con un par de pequeños cambios, logré que funcionara para mí. Lo cambié para que solo lo hiciera una vez. Una vez que salga del menú desplegable, volverá al método habitual de listas desplegables.

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



Súper simple:

var state = false;
$("a").click(function () {
    state = !state;
    $("select").prop("size", state ? $("option").length : 1);
});



Quizás tarde, pero así es como lo resolví: 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');

                  }



Related

jquery html drop-down-menu