[SOLUCIONADO] ¿Como hacer que dos select se definan por una sumatoria?

[maykolr17]

Buenas, no creo que el titulo sea muy intuitivo, asi que ire directo al grano...
Tengo 2 Select:

Código HTML:

<div class="col-xs-12 col-sm-6 col-md-6">
                                                 <!-- Select Basic -->
                                                 <div id="form-adultos" class="form-group">
                                                    <label class="control-label">Adultos</label>
                                                    <select id="adultos" name="adultos" class="form-control">
                                                        <option value="1">1</option>
                                                        <option value="2">2</option>
                                                        <option value="3">3</option>
                                                        <option value="4">4</option>
                                                        <option value="5">5</option>
                                                        <option value="6">6</option>
                                                        <option value="7">7</option>
                                                        <option value="8">8</option>
                                                    </select>
                                                </div>
                                            </div>
 
                                            <div class="col-xs-12 col-sm-6 col-md-6">
                                                 <!-- Select Basic -->
                                                 <div id="form-menores" class="form-group">
                                                    <label class="control-label">Menores</label>
                                                    <select id="menores" name="menores" class="form-control">
                                                        <option value="1">1</option>
                                                        <option value="2">2</option>
                                                        <option value="3">3</option>
                                                        <option value="4">4</option>
                                                        <option value="4">5</option>
                                                        <option value="4">6</option>
                                                        <option value="4">7</option>
                                                        <option value="4">8</option>
                                                    </select>
                                                </div>
                                            </div>
 

Los dos select representan el maximo de personas en un habitación (8 personas)

La idea que quiero saber, es como hacer para el maximo en el dos sean 8, es decir el primero select (Adultos) va del 1 al 8, mientras que el de menores comienza en 0..

Si selecciono 4 adultos, debería tener en el select de menores disponible hasta 4 menores (4 +4 = 8)

- Si elijo 7 adultos, debería poner de tener al menos 1 menor (7 +1 = 8)

- Si Elijo 1 adulto, debería poner tener al menos 7 menores (1 + 7 = 8)

[Alexis88]

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:

<select id = "foo" onchange = "limite(this.value, '#bar')">
    <option value = "1">1</option>
    <option value = "2">2</option>
    <option value = "3">3</option>
    <option value = "4">4</option>
    <option value = "5">5</option>
    <option value = "6">6</option>
    <option value = "7">7</option>
    <option value = "8">8</option>
</select>
    
<select id = "bar" onchange = "limite(this.value, '#foo')">
    <option value = "1">1</option>
    <option value = "2">2</option>
    <option value = "3">3</option>
    <option value = "4">4</option>
    <option value = "5">5</option>
    <option value = "6">6</option>
    <option value = "7">7</option>
    <option value = "8">8</option>
</select>
 

Código Javascript:

function 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

[maykolr17]

MUCHAAAAAAAS GRACIAAAAAAAAAAAAAAS, DE VERDAD Alexis88, si me funcionaaaaa! :apla uso:

Como haría yo para restringir que el mínimo de escoger adultos de sea 2?

[Alexis88]

Al seleccionar el valor, verifica que sea mayor o igual a 2 y listo.