Tengo 2 cuadros combinados en un formulario. Cada uno tiene los valores Sí y No. Lo que quiero es que cuando uno cambie, el otro obtenga lo opuesto (si el primero es Sí, el otro es No). Necesito hacerlo con javascript. Vi esta pregunta Cómo cambiar el valor "seleccionado" en el cuadro combinado usando JavaScript? pero se aplica a un solo cuadro combinado.

¿Cómo puedo hacer esto?

LE: Necesito que este ejemplo se haga con cuadros combinados. No puedo usar botones de radio

2
RBA 2 jun. 2011 a las 11:59

3 respuestas

La mejor respuesta

Creé una jsFiddle Demo simple. Esto no es perfecto, solo ilustra la idea.

HTML:

<select id="first">
    <option value="0" selected>No</option>
    <option value="1">Yes</option>
</select>

<select id="second">
    <option value="0">No</option>
    <option value="1" selected>Yes</option>
</select>

Javascript:

//find the selects in the DOM
var first = document.getElementById('first');
var second = document.getElementById('second');

//this is the handler function we will run when change event occurs
var handler = function () {
    //inside the handler, "this" should be the select 
    //whose change event we are currently handling

    //get the current value and invert it (0 -> 1, 1 -> 0)
    var invertedValue = this.value === '0' ? 1 : 0;

    //check which select's change we are currently handling
    //and set the inverted value as the other select's value
    if (this === first) {
        second.value = invertedValue;
    } else {
        first.value = invertedValue;
    }

};

//add handler function to run on change event on both selects
first.addEventListener('change', handler, false);
second.addEventListener('change', handler, false);
6
kapa 28 jul. 2014 a las 15:19

Creo que esto es lo que estás buscando:

<select id="combo1" onchange="FlipOtherCombo(this, 'combo2')">
    <option value="yes">yes</option>
    <option value="no">no</option>
</select>
<select id="combo2" onchange="FlipOtherCombo(this, 'combo1')">
    <option value="yes">yes</option>
    <option selected="selected" value="no">no</option>
</select>

<script>
    function FlipOtherCombo(objCombo, strOtherComboId){
        if (objCombo.value ==="yes"){
            document.getElementById(strOtherComboId).value = "no";
        } else {
            document.getElementById(strOtherComboId).value = "yes";
        }
    }
</script>

También en este JSFiddle.

Sin embargo, usar botones de radio para opciones simples de sí / no como esta es mejor.

4
James Wiseman 2 jun. 2011 a las 08:15

Aquí está mi propio intento de trabajar con valores sí / no.

html

<select name="combo1" id="combo1">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>
<br /><br />
<select name="combo2" id="combo2">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

javascript

window.onload = function() { BindEvent(); }

function BindEvent()
{
    var c1 = document.getElementById ( 'combo1' );
    var c2= document.getElementById ( 'combo2' );

    c1.onchange = invert;
    c2.onchange = invert;

    c1.onchange(); //initialize
}

function invert() {
         var otherElem = document.getElementById( (this.id=='combo1')? 'combo2' : 'combo1');
         otherElem.value = (this.value=='Yes')?'No':'Yes';
    }

demostración http://jsfiddle.net/gaby/7Ujh2/

2
Gabriele Petrioli 2 jun. 2011 a las 08:26