Question

假设我们有2个不同的选择框，其中包含相同数量的选项：

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

当我们选择第一个框自动在第二个框中选择相同的选项号时，是否可以？如果可能的话，没有jQuery。

更新：2个盒子的值不同！当我们选择box1的第一个值时，框2的值将自动为3！等等...

Answer 1

是。将onChange属性添加到第一个选择，然后使用它来调用您在其他地方编写的javascript函数。

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

W3 Schools JavaScript Events

Example on Accessing SELECT properties in JS

Answer 2

javascript代码段：

var box1=document.getElementById("box1");
box1.onchange=function (){
    document.getElementById("box2").value=box1.value;
}

Answer 3

以下JS可以工作：

document.getElementById("box1").onchange = function(){
    document.getElementById("box2").value = this.value;
};

不是我编写的最优雅的代码，但能为您提供所需的代码。小提琴：http://jsfiddle.net/XZRKS/

Answer 4

希望下面是你想要的......

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

Answer 5

$("#box1").on('change',function(){
  document.getElementById("box2").value = this.value;
  console.log($("#box2").val());
});
$("#box2").on('change',function(){
  document.getElementById("box1").value = this.value;
});

<select id="box1">
<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>

Answer 6

是的，它在javascript中非常简单。只有一行。

function ch(){
  document.getElementById("box2").value = document.getElementById("box1").value ;
}

您可以在ch()

的onchange事件上致电box2

Answer 7

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

这只适用于Gecko / Mozilla 对于IE使用onChange而不是更改和attachEvent而不是addEventListener，有关更多信息，请访问
http://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85%29.aspx
有关querySelector的信息，请参阅此链接
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

onchange选择框

7 个答案: