snippetsmania.com
Post and share your code snippets

//******************************************************************************
// Función nativa de Javascript que se ha modificado por otra.
// Elimina un (o mas) elemento(s) de un array:
Array.prototype.remove = function(from, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};
//******************************************************************************

/*
* 		Clase Two_lists
*
* 		Permite que interactuen 2 elementos SELECT y 2 elementos INPUT del TYPE=BUTTON, para que
* 		que los elementos OPTION de dentro de los SELECT, puedan moverse de un SELECT a otro.
* 		Para hacer el movimiento, se selecciona el OPTION y se pulsa el botón correspondiente.
* 		También se puede hacer seleccionando múltiples OPTIONs con las teclas Ctrl o Shift, siempre
* 		que el SELECT tenga MULTIPLE=MULTIPLE. Para mover uno de manera más práctica, haciendo doble
* 		click también se moverá de SELECT.
*
* 		Para instanciar la clase, hay que pasar cuatro parámetros :
* 		* El primer SELECT
* 		* El segundo SELECT
* 		* El INPUT que mueve del primer SELECT al segundo
* 		* El INPUT que mueve del segundo SELECT al primero
*
* 		La clase posee cuatro funciones a parte de la constructora:
* 		* moveOptionToSelect2 (option)
* 			Mueve el option a nivel interno, es decir, en las 2 arrays internas con los datos de todos
* 			los OPTIONS, mueve el item referenciado al option de un array al otro, y después elimina el
* 			option del HTML.
* 		* moveOptionToSelect1 (option)
* 			Idem anterior, pero en el otro sentido.
* 		* updateSelect1 ()
* 			Actualiza los OPTIONs del primer SELECT, según el array interno referenciado a ese SELECT.
* 			Vacía el SELECT, y lo rellena creando los OPTIONS con sus datos.
* 		* updateSelect2 ()
* 			Idem anteior, pero en el segundo SELECT.
*
*/

var Two_lists = new Class({
Implements: [Options],

select1 : 	null,
select2 : 	null,
asignar :	null,
liberar :	null,
options1 : 	new Array(),		// Array interno con los datos de los OPTIONs del primer SELECT
options2 : 	new Array(),		// Array interno con los datos de los OPTIONs del segundo SELECT

options: {},

//***********************************
// INITIALIZE
//	Función constructora. Requiere por parámetros los dos elementos SELECTs del HTML, y los
//	dos INPUTs que interactuarán en la clase.
//***********************************
initialize: function(select1, select2, asignar, liberar){

// guarda el objeto implícito para dentro de las funciones
var self = this;

this.select1 = select1;
this.select2 = select2;
this.asignar = asignar;
this.liberar = liberar;

//generar el array con todos los options del select1
this.select1.getElements('option').each( function(option) {
self.options1.push({
'id' : option.get('value'),
'name' : option.get('html'),
'state' : true
});
});

//generar el array con todos los options del select2
this.select2.getElements('option').each( function(option) {
self.options2.push({
'id' : option.get('value'),
'name' : option.get('html'),
'state' : true
});
});

//crea el evento de asignar para el botón
this.asignar.addEvent ('click', function () {
var options_selected = self.select1.getElements('option').filter( function(option){
return option.get('selected');
});

options_selected.each ( function (option) {
self.moveOptionToSelect2(option);
});
self.updateSelect2();
});

//crea el evento de liberar para el botón
this.liberar.addEvent ('click', function () {
var options_selected = self.select2.getElements('option').filter( function(option){
return option.get('selected');
});

options_selected.each ( function (option) {
self.moveOptionToSelect1(option);
});
self.updateSelect1();
});

//crea el evento de asignar para el doble click en el option
this.select1.addEvent ('dblclick', function () {
self.asignar.fireEvent('click');
});

//crea el evento de asignar para el doble click en el option
this.select2.addEvent ('dblclick', function () {
self.liberar.fireEvent('click');
});

},

//***********************************
// MOVE OPTION TO SELECT2
//	Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML
//***********************************
moveOptionToSelect2 : function( option ) {

// guarda el objeto implícito para dentro de las funciones
var self = this;

// calcula la posición donde se encuentra el option en el array de options del select original
var position;
this.options1.each( function(item, index) {
if (item.id == option.get('value')) {
position = index;
}
});

// hace el intercambio en los arrays
this.options2.push(this.options1[position]);
this.options1.remove(position);

// borra el option del select original
option.destroy();

},

//***********************************
// MOVE OPTION TO SELECT1
//	Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML
//***********************************
moveOptionToSelect1 : function( option ) {

// guarda el objeto implícito para dentro de las funciones
var self = this;

// calcula la posición donde se encuentra el option en el array de options del select original
var position;
this.options2.each ( function(item, index) {
if (item.id == option.get('value')) {
position = index;
}
});

// hace el intercambio en los arrays
this.options1.push(this.options2[position]);
this.options2.remove(position);

// borra el option del select original
option.destroy();

},

//***********************************
// UPDATE SELECT1
//	Vacía el primer SELECT de todos los OPTIONs, y los vuelve a crear según el array interno.
//***********************************
updateSelect1 : function() {

// guarda el objeto implícito para dentro de las funciones
var self = this;

// borra los options del select de destino, y lo regera según el array
this.select1.empty();

this.options1.each ( function(item) {
if (item.state) {
op = new Element('option', {
'id': 'dominio-' + item.id,
'value': item.id,
'html': item.name
});
op.inject(self.select1);
}
});

},

//***********************************
// UPDATE TO SELECT2
//	Vacía el segundo SELECT de todos los OPTIONs, y los vuelve a crear según el array interno.
//***********************************
updateSelect2 : function() {

// guarda el objeto implícito para dentro de las funciones
var self = this;

// borra los options del select de destino, y lo regera según el array
this.select2.empty();

this.options2.each ( function(item) {
op = new Element('option', {
'id': 'dominio-'+item.id,
'value': item.id,
'html': item.name
});
op.inject(self.select2);
});

}
});

source