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:
- Seleccionar una opción
- Eliminar una opción
- Agregar una nueva opción al componente
- Cargar opciones enviando un objeto JSON y opcional mente indicamos cual estara selecciondo
- Cargar opciones pasando la URL de donde obtendrá el formato JSON y podemos indicar que valor se seleccionara por default
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
- idSelect: Id del compomemte select donde se cargaran los datos .
- url: URL del cual se obtendra el objeto json, o bien la ruta del archivo como en nuestro ejemplo
- dafaultValue: Valor opcional, en caso de que necesitemos que se seleccione un valor por default, por ejemplo cuando estamos editando.
<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
- idSelect: Id del compomemte select donde se cargaran los datos .
- json: Objeto json con los valores a cargar en el componente select
- dafaultValue: Valor opcional, en caso de que necesitemos que se seleccione un valor por default, por ejemplo cuando estamos editando.
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>