I have two boboxes 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 bobox using JavaScript? but it is applied to only one bobox.
How can I do this?
LE:I need this example to be make with boboxes. I can not use radio buttons
I have two boboxes 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 bobox using JavaScript? but it is applied to only one bobox.
How can I do this?
LE:I need this example to be make with boboxes. I can not use radio buttons
Share Improve this question edited Sep 6, 2021 at 11:39 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jun 2, 2011 at 7:59 RBARBA 12.6k16 gold badges83 silver badges133 bronze badges 2-
if its just yes/no, why are you using
boboxand making it plex, just usecheckbox, you can easily flip it.. – niksvp Commented Jun 2, 2011 at 8:01 - Or even the more-appropraitely designed radio button and groupings! – Mutation Person Commented Jun 2, 2011 at 8:03
3 Answers
Reset to default 6I created a simple jsFiddle Demo. This is not perfect, just illustrates the 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);
I believe this is what you are looking for:
<select id="bo1" onchange="FlipOtherCombo(this, 'bo2')">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<select id="bo2" onchange="FlipOtherCombo(this, 'bo1')">
<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.
Although, using radio buttons for simple yes/no options like this is better.
Here is my own attempt working with yes/no values ..
html
<select name="bo1" id="bo1">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br /><br />
<select name="bo2" id="bo2">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
javascript
window.onload = function() { BindEvent(); }
function BindEvent()
{
var c1 = document.getElementById ( 'bo1' );
var c2= document.getElementById ( 'bo2' );
c1.onchange = invert;
c2.onchange = invert;
c1.onchange(); //initialize
}
function invert() {
var otherElem = document.getElementById( (this.id=='bo1')? 'bo2' : 'bo1');
otherElem.value = (this.value=='Yes')?'No':'Yes';
}
demo http://jsfiddle/gaby/7Ujh2/