Javascript - 组合框更改其他组合框的值

Javascript - combobox change value of other combobox

提问by RBA

I have 2 comboboxes on an form. Each has the values Yes and No. What I want is when one is changed the other get the opposite (if the first is Yes the other is No).I need to do it with javascript. I saw this question How to change "selected" value in combobox using JavaScript?but it is applied to only one combobox.

我在一个表单上有 2 个组合框。每个都有值 Yes 和 No。我想要的是当一个改变时另一个得到相反的结果（如果第一个是 Yes，另一个是 No）。我需要用 javascript 来做。我看到了这个问题How to change "selected" value in combobox using JavaScript? 但它仅适用于一个组合框。

How can I do this?

我怎样才能做到这一点？

LE:I need this example to be make with comboboxes. I can not use radio buttons

LE：我需要用组合框制作这个例子。我不能使用单选按钮

回答by kapa

I created a simple jsFiddle Demo. This is not perfect, just illustrates the idea.

我创建了一个简单的jsFiddle Demo。这并不完美，只是说明了这个想法。

HTML:

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:

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);

回答by James Wiseman

I believe this is what you are looking for:

我相信这就是你要找的：

<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>

Also at this JSFiddle.

同样在这个 JSFiddle。

Although, using radio buttons for simple yes/no options like this is better.

尽管如此，使用单选按钮来获得像这样的简单是/否选项会更好。

回答by Gabriele Petrioli

Here is my own attempt working with yes/no values ..

这是我自己尝试使用是/否值..

html

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

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';
    }

demohttp://jsfiddle.net/gaby/7Ujh2/

演示http://jsfiddle.net/gaby/7Ujh2/