[Solucionado] Dropdownlist Multiples Que Se Intercambian Información (Dual Listbox)

International Spanish
1

Hola,

Lo que intento hacer es una pantalla para admitir a alumnos o excluir alumnos de un curso. Para ello mi idea es hacer 2 DropDownList multiples llamados admitidos y excluidos y entre ellos dos botones ">>" y "<<",




Admitidos                          Excluidos

____________                    ____________

|__Alumno1__|                   |__Alumno3__|

|__Alumno2__|      BOTÓN >>     |__Alumno4__|

|___________|      <<BOTÓN      |__Alumno5__|




BOTÓN "GUARDAR"

Cuando pinche en el botón ">>" el alumno seleccionado en el dropDownList de admitidos pasará al dropdownlist de "excluidos". y viceversa.

Cuando haya terminado, pincharé en el botón Guardar y se enviará al controlador los arrays clave valor de Admitidos y el de excluidos. (No las selecciones de ese momento)

Los 2 botones los he creado para que cuando pinches se ejecute una funcion javascript, que sería la encargada de hacer que el alumno seleccionado se pase al otro array:




 <?php echo CHtml::button('>>',array('onClick'=>'admitidosAexcluidos()')); ?>

 <?php echo CHtml::button('<<',array('onClick'=>'exluidosAadmitidos()')); ?>

Lo que no sé es qué tengo que poner en la función para que haga lo que tiene que hacer…

¿alguien me puede ayudar?

Un saludo y muchas gracias!

2

Hola…

A esto se le suele conocer como "dual listbox", igual lo puedes conseguir con otros nombres. Te dejo un par de ejemplos en este LINK

Desconozco si YII tiene alguna librería que implemente algo parecido, por si no, te dejo el link de la documentación del ejemplo que te pase, que por cierto lo use hace tiempo en un proyecto yii. El codigo no lo tengo a la mano pero no me salí de lo que dice la documentación:

Dual Listbox jQuery Plug-in

A ver si alguien sabe de una librería en YII? de todos modos si decides usar el que te recomendé no dudes en preguntar.

Saludos.

3

Hola xavieremv,

muchas gracias por tu aportación. Justo acabo de conseguirlo, aunque no esta tan bien como lo que me propones. Ahora no tengo mucho tiempo para dedicarle a esto, pero cuando termine con el proyecto intentaré mejorarlo con tu aportación.

Dejo lo que he hecho por si le sirve a alguien, pero advierto que es la primera vez que uso jquery y puede que haya algun error o alguna cosa que se haga más sencilla. ;D

NOTA: en la explicación del primer post, por simplicidad puse que eran 2 dropdownlist, pero realmente son 3.




<?php  $form=$this->beginWidget('CActiveForm', array(

	'id'=>'admitir-form',

	'enableAjaxValidation'=>true,

)) ?>




	<?php echo $form->errorSummary($model); ?>


	<div class="row1">

		<div class="drop">

        	        <?php echo $form->labelEx($model,'excluidos'); ?>

			<?php echo $form->listBox($model, 'excluidos', $excluidos, array('multiple'=>true,'id'=>'e','width'=>'1000px'))?>

        	        <?php echo $form->error($model,'excluidos'); ?>

		</div>

		<div class="botones">

			<br>

			<?php echo CHtml::button('>>',array('onClick'=>'excluidosAinscritos()')); ?>

			<br>

			<?php echo CHtml::button('<<',array('onClick'=>'inscritosAexcluidos()')); ?>

		</div>	

		<div class="drop">

        	        <?php echo $form->labelEx($model,'inscritos'); ?>

			<?php echo $form->listBox($model,'inscritos', $inscritos, array('multiple'=>true,'id'=>'i'))?>

        	        <?php echo $form->error($model,'inscritos'); ?>

		</div>	

		<div class="botones">

			<br>

			<?php echo CHtml::button('>>',array('onClick'=>'inscritosAadmitidos()')); ?>

			<br>

			<?php echo CHtml::button('<<',array('onClick'=>'admitidosAinscritos()')); ?>

		</div>	

		<div class="drop">

  			<?php echo $form->labelEx($model,'admitidos'); ?>

			<?php echo $form->dropDownList($model, 'admitidos', $admitidos, array('multiple'=>'multiple','id'=>'a'))?>

			<?php echo $form->error($model,'admitidos'); ?>

		</div>	

	</div>	

		

	<div class="row buttons">

		<?php echo CHtml::submitButton('Guardar',array('onClick'=>'actualizarVariables()') ); ?>

		<?php  echo CHtml::HiddenField('admitidos',' ',array('id'=>'admitidos')); ?>

		<?php  echo CHtml::HiddenField('inscritos',' ',array('id'=>'inscritos')); ?>

		<?php  echo CHtml::HiddenField('excluidos',' ',array('id'=>'excluidos')); ?>

	</div>

		

	<script language="JavaScript">

	function actualizarVariables(){

		$("#i option").each(function(){

			$(this).attr("selected", "true"); 

		});

	        var inscritos= $("#i").val()||[];

			inscritos.join(", ");

		

		$("#a option").each(function(){

			$(this).attr("selected", "true"); 

		});

	        var admitidos= $("#a").val()||[];

			admitidos.join(", ");

	

		$("#e option").each(function(){

                        $(this).attr("selected", "true"); 

                });

                var excluidos= $("#e").val()||[];

                        excluidos.join(", ");


		

		$('#admitidos').val(admitidos);

		$('#inscritos').val(inscritos);

		$('#excluidos').val(excluidos);

	}

		

	function inscritosAadmitidos(){	

		var valor= $("#i").val();

		var texto = $("#i option:selected").text();

		if (texto!=""){

		$("#i option[value='"+valor+"']").remove();

		$('#a').append("<option value='"+valor+"'>"+texto+"</option>");

		}

	}

	

	function admitidosAinscritos(){

		var valor= $("#a").val();

		var texto = $("#a option:selected").text();

		if (texto!=""){

		$("#a option[value='"+valor+"']").remove();

		$('#i').append("<option value='"+valor+"'>"+texto+"</option>");

		}

	}

	

	function excluidosAinscritos(){

	var valor= $("#e").val();

                var texto = $("#e option:selected").text();

                if (texto!=""){

                $("#e option[value='"+valor+"']").remove();

                $('#i').append("<option value='"+valor+"'>"+texto+"</option>");

                }

	}

	

	function inscritosAexcluidos(){

	 var valor= $("#i").val();

                var texto = $("#i option:selected").text();

                if (texto!=""){

                $("#i option[value='"+valor+"']").remove();

                $('#e').append("<option value='"+valor+"'>"+texto+"</option>");

                }

	}	

   </script> 

<?php $this->endWidget(); ?>

Espero que a alguien le sirva

Un saludo