Obtener valores y texto de un select con jquery y descargar archivos según selección

En un artículo pasado ya hemos revisado como obtener valores y texto de un select con javascript, pero en esta ocasión veremos cómo hacerlo usando jquery, además de eso podremos descargar diferentes archivos según nuestra selección, modificando la estructura html de una etiqueta de enlace disfrazada como botón mediante CSS.

Como primer paso debemos exportar nuestra biblioteca jquery a nuestra página o proyecto:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

Una vez hecho esto debemos agregar los elementos HTML con los que vamos a trabajar, estos serán:

• Una etiqueta label
• Un control de formulario select
• Un control de formulario input de tipo text
• Una etiqueta de enlace <a>

Con nuestros elementos y controles en su sitio, debemos ahora detallar su identificador a través del atributo ID el cual nos servirá de selector en nuestro código CSS y JAVASCRIPT.

Nuestro código deberá verse de la siguiente forma:

<label for="cmbDowload">Descargar Archivos</label>
 <select id="cmbDowload">
	 <option value="">Seleccione...</option>
	 <option value="data-01.xlsx">Data 01</option>
	 <option value="data-02.xlsx">Data 02</option>
	 <option value="data-03.xlsx">Data 03</option>
	 <option value="data-04.xlsx">Data 04</option>
</select> 

<input id="txtSeleccionado" type="text" disabled />

<a id="Exportar">Exportar</a>

Explicación del formulario:

Control Select

Es importante observar que nuestro control de formulario select cuenta con 5 option, estando uno de ellos vacío para servirnos de opción en blanco, los demás tendrán dos cosas importantes:

• El atributo value el cual será una referencia directa al nombre del archivo que queremos descargar, en este caso son archivos de Excel “xlsx” las cuales tendremos en una carpeta dentro de nuestro sitio web.
• El texto que el visitante o usuario vera al navegar entre las opciones del control de formulario select son meramente estetica y puede variar según nuestro criterio.

Tomar en cuenta: El atributo value y el texto que el usuario verá, será variante según el nombre de tu archivo; es importante que ese archivo no contenga caracteres especiales, mayúsculas, espacios en blanco o cualquier símbolo que el servidor no pueda interpretar.

Control Input de tipo text

El control Input de tipo text sirve únicamente para mostrar el valor y texto que ha sido seleccionado.

Enlace (Etiqueta “a”)

La etiqueta “a” será la encargada de llamar al archivo que deseamos descargar una vez seleccionemos la opción en nuestro select, para ello modificaremos el atributo href mediante jquery.

Tomar en cuenta: Aplicando un poco de javascript podemos lograr el mismo efecto mediante un control de formulario input de tipo submit o buttom, pero algunos navegadores interpretaran esto como una acción invasiva y bloquearan la pantalla mostrando un mensaje incomodo al usuario.

Vayamos ahora con la parte funcional, nuestro código Javascript aplicado con jquery.

Aplicando las funciones Javascript

En la parte inferior (Después de nuestro código HTML y antes del cierre de la etiqueta body) colocaremos las etiquetas de apertura y cierre <script><script>  y dentro de ellas nuestro código como sigue:

<script>
	// FUNCION JQUERY GENERAL, QUE VALIDA SI LA PÁGINA ESTÁ COMPLETAMENTE CARGADA
	$(document).ready(function () {

		// ENVIAMOS EL EVENTO CHANGE AL SELECT
		$(document).on('change', '#cmbDowload', function(event) {
			 seleccionar_registro();
		});

	});


	//
	// MUESTRA EL VALOR Y TEXTO SELECCIONADO DEL ELEMENTO SELECT EN UNA CAJA DE TEXTO
	// VARIABLES: NOTHING
	// RETORNA: NOTHING
	function seleccionar_registro()
	{
		// DECLARAMOS LAS VARIABLES QUE USAREMOS
		var select_item, select_text, texto_mostrar;

		// OBTENEMOS EL VALOR DEL SELECT QUE HEMOS SELECCIONADO.
		select_item = $("#cmbDowload").val();

		// VALIDAMOS SI EL SELECT ESTÁ SELECCIONADO
		if (select_item == ""){

			// LIMPIAMOS LA CAJA DE TEXTO
			$("#txtSeleccionado").val("");

			// REMOVEMOS EL ATRIBUTO HREF DEL ENLACE
			$("#Exportar").removeAttr("href");
		}
		else
		{
			// OBTENEMOS EL TEXTO VISIBLE DEL CONTROL SELECT
			select_text = $("#cmbDowload option:selected").text();

			// UNIMOS EN UNA SOLA CADENA EL VALOR Y EL TEXTO DEL SELECT
			// Y LO MOSTRAMOS EN EL CONTROL INPUT DE TIPO TEXT
			texto_mostrar = "VALOR: " + select_item + " | TEXTO: " + select_text;
			$("#txtSeleccionado").val(texto_mostrar);

			// CREAMOS LA RUTA EN BASE A NUESTRA CARPETA DE ARCHIVOS
			//Y NUESTRO VALOR SELECCIONADO
			var ruta = "dowload/" + select_item;

			// AGREGAMOS EL ATRIBUTO HREF AL ENLACE JUNTO CON LA RESPECTIVA RUTA
			$("#Exportar").attr("href", ruta)

		}

	}		
</script>

Finalmente he dejado el ejemplo en vivo y para descargar en los botones abajo mostrados. Finalmente, espero que este articulo les resulte útil, si tienen alguna duda pueden hacerla en la caja de comentarios o solicitar nuevos artículos de un tema de interes.

Descargar el Proyecto Ver en vivo