2011-06-02 92 views
2

我在窗体上有2个组合框。每个人都有“是”和“否”的值。我想要的是当其中一个更改时,另一个则相反(如果第一个是“是”,另一个是“否”)。我需要使用javascript来完成。我看到这个问题How to change "selected" value in combobox using JavaScript?,但它只适用于一个组合框。Javascript - 其他组合框的combobox更改值

我该怎么做? LE:我需要使用组合框来制作这个例子。我不能使用单选按钮

+0

如果仅仅是/否,为什么你使用'combobox'并使其复杂,只要使用'checkbox',你可以很容易地翻转它.. – niksvp 2011-06-02 08:01:25

+0

甚至更​​适合设计的单选按钮和分组! – 2011-06-02 08:03:52

回答

6

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

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

我相信这是你在找什么:

this JSFiddle.

虽然

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

此外,使用单选按钮简单的是/像这样没有选择比较好。

+0

我应该注意到,我一直懒我的内联'onclick'绑定。 @ bazmegakapa的答案更好,因为它在JavaScript中执行绑定 – 2011-06-02 08:20:55

2

这里是有工作我自己尝试/没有值..

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

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

相关问题