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.