View on GitHub

Html-select

Plugin para la Manipulación del componente Select HTML

Download this project as a .zip file Download this project as a tar.gz file

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

 

Miremos algunos ejemplos sobre su uso, con un objeto json el cual contendra la lista de los estados de Mexíco.

$.select.loadDataJsonAjax()

Este metodo carga los datos onbtenidos desde un objeto json al componente select.

Parametros

Nuestro código html y JS, para cargar los estados y seleccionar por default el estado número 22.
 <select id="estados"></select>
 <script>
$url = "estados.json";
$.select.loadDataJsonAjax("estados",$url,22);
</script>

El resultado

$.select.loadDataJson

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

Parametros

Nuestro código html y JS en estecaso no vamos a seleccionar ningun valor por default.

<select id="estadosJson"></select>		
<script>
var objetoJson = [{"value":"1","text":"Aguascalientes"},{"value":"2","text":"Baja California"},{"value":"3","text":"Baja California Sur"},{"value":"4","text":"Campeche"},{"value":"5","text":"Coahuila"},{"value":"6","text":"Chihuahua"},{"value":"7","text":"Chiapas"},{"value":"8","text":"Colima"}];
$.select.loadDataJson("estadosJson",objetoJson);
</scipt>

Resultado


Seleccionando una opción de nuestro select

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

Nuestro JS

$.select.setValue("estados", 18);

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 donde su value coincida con el parámetro enviado.

Nuestro JS

$.select.removeOption("estados", 18);

 

Agregar una opción a nuestro select

Nuestro JS

$.select.dOption("estados", 33, "Nuevo estado");

 

Test

 

Estados:  
    Agregar

Value:

Texto:

<script>
$url = "estados.json";
$.select.loadDataJsonAjax("estadosSelect",$url,22);
function seleccionar(){
$.select.setValue("estadosSelect",$("#valueSelect").val());
}
function remover(){
$.select.removeOption("estadosSelect",$("#valueSelect").val());
} function add(){
$.select.addOption("estadosSelect",$("#valueAdd").val(),$("#textAdd").val());
$.select.setValue("estadosSelect",$("#valueAdd").val());
}
</script>