Foros del Web » Creando para Internet » HTML »

Select con varias opciones visibles y lo demás, desplegable

Estas en el tema de Select con varias opciones visibles y lo demás, desplegable en el foro de HTML en Foros del Web. Hola amigos, Estoy intentando construir un select que tenga 3 opciones visibles y que a partir de la cuarta opción sea ya un select normal, ...
  #1 (permalink)  
Antiguo 06/05/2019, 02:44
 
Fecha de Ingreso: septiembre-2003
Mensajes: 327
Antigüedad: 15 años, 8 meses
Puntos: 3
Select con varias opciones visibles y lo demás, desplegable

Hola amigos,

Estoy intentando construir un select que tenga 3 opciones visibles y que a partir de la cuarta opción sea ya un select normal, de 1 elemento con su flechita para desplegar a la derecha, pero no encuentro la forma de hacerlo.

Lo único que he encontrado, pero no es lo que quiero, es utilizar "size", pero como digo, no me sirve.

Es decir, lo que quiero es un select entero, con 3 opciones a la vista, y la cuarta opción ya como si fuera un select normal, pero que todo forme parte del mismo select (y la flechita habitual al lado de la cuarta opción únicamente).

Algo como esto, ¿se puede hacer?:

Código HTML:
<select name="loquesea">
<option value="valor1">Texto 1</option> <!--opcion visible-->
<option value="valor2">Texto 2</option> <!--opcion visible-->
<option value="valor3">Texto 3</option> <!--opcion visible-->
<option value="valor4">Texto 4</option> <!--aquí aparecería la flechita habitual del select-->
<option value="valor5">Texto 5</option> <!--opcion visible al desplegar con la flechita-->
<option value="valor6">Texto 6</option> <!--opcion visible al desplegar con la flechita-->
<option value="valor7">Texto 7</option> <!--opcion visible al desplegar con la flechita-->
</select> 
¿Es posible hacerlo? No sé si me he explicado correctamente...

Muchísimas gracias de antemano.

Última edición por kabe_jrr; 06/05/2019 a las 03:13
  #2 (permalink)  
Antiguo 06/05/2019, 03:35
 
Fecha de Ingreso: septiembre-2003
Mensajes: 327
Antigüedad: 15 años, 8 meses
Puntos: 3
Respuesta: Select con varias opciones visibles y lo demás, desplegable

He intentado algo de este estilo, pero claro, no hace lo que quiero porque siempre devolverá el valor seleccionado en el último select (pero quizá da una idea de qué quiero obtener):

Código HTML:
<style>
.sinarrow {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
}
</style>
<div>
<select multiple size="1" name="select" class="sinarrow">
	<option>1</option>
</select>
</div>
<div>
<select multiple size="1" name="select" class="sinarrow">
	<option>2</option>
</select>
</div>
<div>
<select multiple size="1" name="select" class="sinarrow">
	<option>3</option>
</select>
</div>
<div>
<select name="select">
	<option>4</option>
	<option>5</option>
	<option>6</option>
</select>
</div> 
  #3 (permalink)  
Antiguo 06/05/2019, 08:00
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.337
Antigüedad: 11 años, 3 meses
Puntos: 1041
Respuesta: Select con varias opciones visibles y lo demás, desplegable

Y si en lugar de un select utilizas un input hidden y una lista para simular el select

Con una lista <UL> + un poco de javascript podrías simular un select, utilizar el evento onclick en los <LI> para marcarlo como seleccionado y enviar el valor seleccionado al input
  #4 (permalink)  
Antiguo 06/05/2019, 08:30
 
Fecha de Ingreso: septiembre-2003
Mensajes: 327
Antigüedad: 15 años, 8 meses
Puntos: 3
Respuesta: Select con varias opciones visibles y lo demás, desplegable

Hola, gracias por la respuesta.

Veo que hay información sobre cómo hacerlo como dices. ¿Pero cómo se podría poner la flechita típica de un select en un elemento que no sea el primero de la lista? Porque lo que a mí me gustaría conseguir es que los 3 primeros elementos de la lista estén siempre "a la vista" mientras que a partir del cuarto sea desplegable, pero que todo forme parte de un mismo "select" (o lista)
  #5 (permalink)  
Antiguo 06/05/2019, 08:39
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.337
Antigüedad: 11 años, 3 meses
Puntos: 1041
Respuesta: Select con varias opciones visibles y lo demás, desplegable

Tienes que jugar con las reglas CSS, usa el pseudo elemento after de otro elemento o bien usa posiciones.

Todo es posible solo tienes que intentarlo una y otra vez., regresa con código y muéstranos avances, con gusto te apoyare e indicare que modificar.

Puedes usar http://jsfiddle.net/ para armar la demo y mostrarnos como vas.
  #6 (permalink)  
Antiguo 06/05/2019, 08:49
 
Fecha de Ingreso: septiembre-2003
Mensajes: 327
Antigüedad: 15 años, 8 meses
Puntos: 3
Respuesta: Select con varias opciones visibles y lo demás, desplegable

Ay madre... Son conceptos que me quedan demasiado grandes de momento... nunca he llegado a usar ni controlar el before/after, y con los position siempre ando peleándome :s
  #7 (permalink)  
Antiguo 06/05/2019, 11:04
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.337
Antigüedad: 11 años, 3 meses
Puntos: 1041
Respuesta: Select con varias opciones visibles y lo demás, desplegable

Nadie nace sabiendo, en su momento dije lo mismo que tu, pero solo es cuestión de estudiar la documentación y darle a prueba y error hasta que quede, la practica hace al maestro, así que a darle que para luego es tarde.

De ti dependerá si sale hoy, mañana o nunca.
  #8 (permalink)  
Antiguo 06/05/2019, 14:31
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.408
Antigüedad: 17 años
Puntos: 174
Respuesta: Select con varias opciones visibles y lo demás, desplegable

http://jsfiddle.net/kEnC9/ espero te sirva.
Slds.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #9 (permalink)  
Antiguo 07/05/2019, 00:36
 
Fecha de Ingreso: septiembre-2003
Mensajes: 327
Antigüedad: 15 años, 8 meses
Puntos: 3
Respuesta: Select con varias opciones visibles y lo demás, desplegable

Muchas gracias, lo probaré.



La zona horaria es GMT -6. Ahora son las 00:50.