0

Si tengo un select html en un sitio web cargado con varias opciones, ¿Cómo puedo mediante JavaScript hacer que se "despliege" sin necesidad de que el usuario le haga clic para desplegarlo?

 <select>
  <option>opcion 1</option>
  <option>opcion 2</option>
  <option>opcion 3</option>
 </select>

3 respuestas 3

1

Podrías simular un evento click con javascript Primero para no abrir inmediatamente debes poner un retraso con setTimeout dentro de esta función colocas document.getElementById('id-select').click();

1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 5 oct. 2023 a las 23:50
1

Con un select común y corriente no, no se puede. Hay algunos workaround despachando eventos custom, pero no son homogéneos en todos los browsers. De hecho no son homogeneos a través de distintas versiones del mismo browser.

Te sugiero usar una de las muchas librerías que existen para extender la funcionalidad nativa de los select, dado que en ellas el widget JS que sustituye al selector sí puede controlarse netamente por JS. Te dejo un ejemplo usando la popular, simple y elegante librería Tom Select

const selectElement = document.querySelector('#select-beast')
document.addEventListener('DOMContentLoaded', e => {

  const tomSelect = new TomSelect(selectElement, {
    create: true,
    sortField: {
      field: "text",
      direction: "asc"
    }
  });
  setTimeout(() => tomSelect.open(), 1200)
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>

<select id="select-beast" placeholder="Select a person..." autocomplete="off">
  <option value="">Select a person...</option>
  <option value="4">Thomas Edison</option>
  <option value="1">Nikola</option>
  <option value="3">Nikola Tesla</option>
  <option value="5">Arnold Schwarzenegger</option>
</select>

0

Puedes usar el atributo size del select, el cual, tal y como dice la documentación:

size

Si el control se presenta como una lista con scroll en caja, este atributo representa el numero de filas que la list tendrá visible la primera vez. Los navegadores no están requeridos a presentar un elemento select como una lista con escroll en caja. El valor por defecto es cero.

Por ejemplo:

<select name="sometext" size="7">
  <option>opción 1</option>
  <option>opción 2</option>
  <option>opción 3</option>
  <option>opción 4</option>
  <option>opción 5</option>
  <option>opción 6</option>
  <option>opción 7</option>
</select>

Imaginemos que sólo quieres mostrar las primeras tres opciones:

<select name="sometext" size="3">
  <option>opción 1</option>
  <option>opción 2</option>
  <option>opción 3</option>
  <option>opción 4</option>
  <option>opción 5</option>
  <option>opción 6</option>
  <option>opción 7</option>
</select>

Otras alternativas

Pero considera que podría haber otros elementos más naturales, interesantes y fáciles de usar, tales como checkbox o radio. Como los option de un select, ambos tiene un atributo value, admiten también atributos data-* y puedes hacer cualquier cosa con ellos de forma programática, como determinar cuáles han sido marcados o no, escuchar los cambios, etc.

checkbox

Con checkbox puedes seleccionar varios elementos:

<label><input type="checkbox" value="1" />Opción 1</label><br />
<label><input type="checkbox" value="2" />Opción 2</label><br />
<label><input type="checkbox" value="3" />Opción 3</label><br />
<label><input type="checkbox" value="4" />Opción 4</label><br />
<label><input type="checkbox" value="5" />Opción 5</label><br />
<label><input type="checkbox" value="6" />Opción 6</label><br />
<label><input type="checkbox" value="7" />Opción 7</label><br />

radio

Con radio puedes seleccionar, sólo uno, si los radio tienen el mismo name, así, puedes poner un name distinto para crear grupos de radio por ejemplo:

<h2>Grupo A</h2>
<p>Sólo puedes seleccionar uno de este grupo</p>
<label><input type="radio" name="grupo-a" value="1" />Opción 1</label><br />
<label><input type="radio" name="grupo-a" value="2" />Opción 2</label><br />
<label><input type="radio" name="grupo-a" value="3" />Opción 3</label><br />
<label><input type="radio" name="grupo-a" value="4" />Opción 4</label><br />

<hr />
<h2>Grupo B</h2>
<p>Sólo puedes seleccionar uno de este grupo</p>

<label><input type="radio" name="grupo-b" value="5" />Opción 5</label><br />
<label><input type="radio" name="grupo-b" value="6" />Opción 6</label><br />
<label><input type="radio" name="grupo-b" value="7" />Opción 7</label><br />

Pensando en el usuario, puede que estas dos últimas opciones sean más cómodas, para lo que pareces pretender aquí, claro está, si no hablamos de una gran cantidad de opciones.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.