Tendrías que ejecutar un conjunto de instrucciones por cada vez en la que se seleccione una opción en cualquiera de los
<select>
, en donde tendrás que restar al 8 menos el valor seleccionado, retiras las opciones del otro
<select>
y le añades una cantidad de opciones que dependerá del resultado de la resta anterior.
Un ejemplo:
Código HTML:
Ver original<select id = "foo" onchange = "limite(this.value, '#bar')">
<select id = "bar" onchange = "limite(this.value, '#foo')">
Código Javascript
:
Ver originalfunction limite(valor, id){
var otro = document.querySelector(id),
actual = otro.value;
otro.innerHTML = "";
for (var i = 0, l = 8 - valor, opc; i < l; i++){
opc = document.createElement("option");
opc.value = i + 1;
opc.text = i + 1;
otro.add(opc);
}
if (actual <= otro.options.length){
for (var j = 0, m = otro.options.length; j < m; j++){
if (otro.options[j].value == actual){
otro.options[j].selected = true;
break;
}
}
}
}
Al cambiar el valor de cada
<select>
, le envío a la función el valor seleccionado y el
id
del otro
<select>
. En la función, tomo al otro
<select>
por su
id
y al valor actual que posee; enseguida, retiro el contenido del
<select>
en cuestión y, mediante un bucle, le añado la cantidad de opciones que faltan para llegar a 8.
Para que la opción seleccionada en el
<select>
afectado no deje de estar seleccionada, verifico que sea menor o igual al número de opciones por añadir y que dicho
<select>
posea opciones y, recorriendo el conjunto de opciones que ahora posee, selecciono a la que posea el valor previamente seleccionado.
DEMO
Saludos