En un post anterior se hablo sobre el como manipular el componente select con jQuery, y en lo personal el tener que seleccionar una opción por default, cargar una lista de datos  o remover opciones, son tareas muy tediosas y molestas, es por ello que decidí hacer un plugins que haga este trabajo, y hoy lo comparto con ustedes.

 

Este plugins para jQuery permite la manipulación del componente HTML select, el cual nos ahorrara mucho trabajo en algunas tareas muy tediosas, inicial cuanta con las siguientes características:

  • Seleccionar una opción
  • Eliminar una opción
  • Cargar opciones enviando un objeto JSON
  • Cargar opciones pasando la URL de donde obtendrá el formato JSON

Queda pendiente

  • Cargar las opciones mediante un array
  • Cargar opciones (Json y array) y en el la misma función indicar cual se seleccionar por default. En esta misma semana queda, no se preocupen.

Seleccionando una opción de nuestro select

con la función $.select.setValue(idSelect, value) podemos seleccionar una opcion de un select, unida mente enviado el id y el valor del value que queremos seleccionar.

Nuestro JS $.select.setValue("idSelect", "febrero);

Nuestro HTML

<select id="idSelect" name="nameSalect">

<option value="enero">Enero</option>

<option value="febrero">Febrero</option>

<option value="marzo">Marzo</option>

</select>

$.select.setValue(idSelect, value)

Remover una opción de nuestro select

Los parámetros enviados son iguales que $.select.setValue, pero con la diferencia que se eliminara la opción done su value coincida con el parámetro enviado.

$.select.removeOption(idSelect, value)

$.select.loadDataJsonAjax()

Carga los datos de un objeto Jsonen el combo $.select.loadDataJsonAjax(«idSelect», url);

Nuestro codigo JS$.select.loadDataJsonAjax("idSelect",'http://soyprogramador.liz.mx/getDatosJson/');

Nuestro código HTML: <select id="idSelect" name="nameSalect"></select>

Ejemplo del JSON obtenido desde una URL

[{"value":"1","text":"Liderazgo"},{"value":"2","text":"Recursos Humanos"},{"value":"3","text":"Marketing"},{"value":"4","text":"Idiomas"}]

$.select.loadDataJsonAjax(«idSelect», url);

$.select.loadDataJson

 

$.select.loadDataJson(«idSelect», json);

Funciona de manera similar que el anterior solo que los datos en formato JSONson pasados como parámetro.

 

En breve mostrare como incluirlo en kumbiaPHP para que nos regrese la petición el objeto como JSON

 

Repositorio oficial Sitio oficial

Un comentario en «$.select: plugin para manipular el componente HTML select»

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *