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

<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>