Ver Mensaje Individual
  #2 (permalink)  
Antiguo 29/06/2015, 13:53
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 6 meses
Puntos: 977
Respuesta: ¿Como hacer que dos select se definan por una sumatoria?

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
  1. <select id = "foo" onchange = "limite(this.value, '#bar')">
  2.     <option value = "1">1</option>
  3.     <option value = "2">2</option>
  4.     <option value = "3">3</option>
  5.     <option value = "4">4</option>
  6.     <option value = "5">5</option>
  7.     <option value = "6">6</option>
  8.     <option value = "7">7</option>
  9.     <option value = "8">8</option>
  10.    
  11. <select id = "bar" onchange = "limite(this.value, '#foo')">
  12.     <option value = "1">1</option>
  13.     <option value = "2">2</option>
  14.     <option value = "3">3</option>
  15.     <option value = "4">4</option>
  16.     <option value = "5">5</option>
  17.     <option value = "6">6</option>
  18.     <option value = "7">7</option>
  19.     <option value = "8">8</option>

Código Javascript:
Ver original
  1. function limite(valor, id){
  2.     var otro = document.querySelector(id),
  3.         actual = otro.value;
  4.    
  5.     otro.innerHTML = "";
  6.     for (var i = 0, l = 8 - valor, opc; i < l; i++){
  7.         opc = document.createElement("option");
  8.         opc.value = i + 1;
  9.         opc.text = i + 1;
  10.         otro.add(opc);
  11.     }
  12.    
  13.     if (actual <= otro.options.length){
  14.         for (var j = 0, m = otro.options.length; j < m; j++){
  15.             if (otro.options[j].value == actual){
  16.                 otro.options[j].selected = true;
  17.                 break;
  18.             }
  19.         }
  20.     }
  21. }

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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 29/06/2015 a las 14:00 Razón: Mantener valor previamente seleccionado