Fatal编程技术网

Javascript onchange选择框

javascript dom

Javascript onchange选择框,javascript,dom,Javascript,Dom,假设我们有两个不同的选择框，具有相同数量的选项： <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</o

假设我们有两个不同的选择框，具有相同数量的选项：

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


1.
2.
3.
4.
当我们选择第一个框时，是否可以在第二个框中自动选择相同的选项号？如果可能，不使用jQuery

更新：两个框的值不同！当我们选择框1的第一个值时，框2的值将自动为3！等等…

是的，它在javascript中很简单。就一行

function ch(){
  document.getElementById("box2").value = document.getElementById("box1").value ;
}
您可以在
box2

的
onchange
事件上调用
ch（）
，
希望下面就是您想要的


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




1.
2.
3.
4.
5.
6.
7.
1.
2.
3.
4.
5.
6.
7.

javascript代码片段：


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



对。在第一个select中添加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>




1.
2.
1.
2.





以下JS将起作用：


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


这不是我写过的最优雅的代码，但可以满足您的需要。小提琴：

这只在Gecko/Mozilla中有效

对于IE，使用onChange代替change，使用attachEvent代替addEventListener，有关更多信息，请访问



有关查询选择器的信息，请参阅此链接




$（“#box1”）.on（'change'，function（）{
document.getElementById（“box2”）.value=this.value；
log（$（“#box2”）.val（））；
});
$（“#box2”）。on（'change'，function（）{
document.getElementById（“box1”）.value=this.value；
});


1.
2.
1.
2.

当你说没有jquery时，你是特别指jquery还是javascript？因为jquery可以实现的任何事情都可以通过javascript实现（因为jquery只是javascript的一个框架），当我说没有jquery时，我的意思是页面上没有jquery框架。顺便说一句，我编辑了q，因为你们中的一些人只是简单地将相同的值设置到第二个框中。只需使用
查看更多详细信息的答案…Fahim Parkar，框值不同。再次检查Q，我更新了它。+1作为参考缓存，并以整整两分钟的时间击败我得到答案。。。快速发帖是一门我尚未掌握的艺术：）显然，我不需要将第二个框的值设置为第一个框的值（它们是不同的）。这只是一个例子，差不多两个月后，我坐在两张赞成票和两张反对票的位置上，答案被接受了。认为应该投反对票的人都没有提到原因。为什么？这可能是因为一些人对W3学校抱有类似邪教的仇恨。有些人只是因为看到了W3学校的任何联系而投了反对票——我不认为这是针对个人的。

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