Tengo dos select list, uno de origen y otro de destino, pero estoy limitando a 3 las opciones para el select destino. Lo limito con un contador que se incrementa cada vez que presionas el botón de pasar a la izquierda. Para evitar incrementar el contador sin seleccionar ninguna opción lo que hago es deshabilitar el botón de pasar a izquierda hasta que no se seleccione alguna opción.
La idea es la misma para el botón de pasar a la derecha, pero el contador en este caso resta.
El código es el siguiente:
<!doctype html>
<head>
<title>Pasar opciones de un select list a otro con jQuery</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
body{width:600px;margin:0 auto;overflow-x:hiden;}
select{width:180px;margin:0 0 50px 0;border:1px solid #ccc;padding:10px;border-radius:10px 0 0 10px;}
.clear{clear:both;text-align:center}
div{float:left;width:200px;text-align:center}
input {margin:25px 1px 0 1px;border:1px solid #ccc;padding:10px;}
.izq{border-radius:10px 0 0 10px;}
.der{border-radius:0 10px 10px 0;}
select: disabled { background:#DD2D30; border:1px solid red;}
</style>
</head>
<body>
<h1>Pasar opciones de un select list a otro con jQuery</h1>
<form action="" method="post" id="formulario">
<div>
<select name="origen[]" id="origen" size="8" >
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
<option value="4">Opción 4</option>
<option value="5">Opción 5</option>
<option value="6">Opción 6</option>
<option value="7">Opción 7</option>
<option value="8">Opción 8</option>
</select>
</div>
<div>
<input type="button" class="pasar izq" value="Pasar »" id="pasar_izq" name="pasar_izq" disabled><input type="button" class="quitar der" id="pasar_der" name="pasar_der" value="« Quitar" disabled><br />
</div>
<div class="">
<select name="destino[]" id="destino" size="8"></select>
</div>
<p class="clear"><input type="submit" class="submit" value="Procesar formulario"></p>
</form>
<div id="content">0</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
var x = 0; //Initial field counter is 1
$("select#origen").change(function () {
if(x != 3) {
$("#pasar_izq").prop("disabled", false);
}
alert($('#origen option').length);
});
$('#pasar_izq').click(function() {
if(x < 3){ //Check maximum number of input fields
x++; //Increment field counter
$("#pasar_izq").prop("disabled", true);
document.getElementById("content").innerHTML = x;
return !$('#origen option:selected').remove().appendTo('#destino');
}
});
$(document).on('change','#destino',function(){
if(x != 0) {
$("#pasar_der").prop("disabled", false);
}
alert($('#destino option').length);
});
$('#pasar_der').click(function() {
if(x >= 1){ //Check maximum number of input fields
x--; //Increment field counter
$("#pasar_der").prop("disabled", true);
document.getElementById("content").innerHTML = x;
return !$('#destino option:selected').remove().appendTo('#origen');
}
});
$('.submit').click(function() { $('#destino option').prop('selected', 'selected'); });
});
</script>
El problema que tengo es cuando solamente paso una opción a la derecha esta función $(document).on('change','#destino',function(){ ...}); no funciona, y el botón de pasar a la derecha no se deshabilita, es como si con 1 opción no funcionase ya que cuando pasas dos o más opciones si que se habilita.
¿Alguien sabe alguna solución?
Muchas gracias