Onchange select box
Let's say we have 2 different select boxes with the same number of options:
<select id="box1">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="3" >3</option>
<option value="4" >4</option>
</select>
Is it possible when we select the first checkbox to automatically select the same option number in the second box? Without jQuery if possible.
UPDATE: the values of the two fields are different! When we select the first value for box1, the value for box 2 will automatically be 3! etc...
source to share
Yes. Add the onChange property to the first selection, then use it to call the javascript function you wrote elsewhere.
<select id="box1" onChange="changeBox2(this.selectedIndex);">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
source to share
The following JS will work:
document.getElementById("box1").onchange = function(){
document.getElementById("box2").value = this.value;
};
Not the most elegant code I've written, but you get what you need. Fiddle: http://jsfiddle.net/XZRKS/
source to share
Hope below is what you want ...
<html>
<body>
<select id="box1" onChange="box2.value=box1.value">
<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>
</select>
<select id="box2" onChange="box1.value=box2.value">
<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>
</select>
</body>
</html>
source to share
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.addEventListener("change", function(e){
var val = parseInt(this.value);
box2.querySelector("option:nth-child("+val+")").selected = true;
}, false);
This will only work in Gecko / Mozilla For IE use onChange instead of change and attachEvent instead of addEventListener, for more information visit
http://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85 % 29.aspx
for info on querySelector see this link
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector
source to share