Javascript 保持2<；选择>；值更改时同步

我有两个

s和相同的

s

如果用户在第一个值中选择了一个值，则第二个值也应更改以保持两者同步

这就是我迄今为止所尝试的：

function data\u copy（）{
如果（document.form1.copy[0]。已选中）{
对于（i=document.form1.state.options.length-1；i>=0；i--）{
if（document.form1.state.options[i].选中）
document.form1.state2.options[i].selected=true；
}
}否则{
document.form1.state2.options[0]。selected=true；
}
}

陈述
一个
两个
三
四
陈述
一个
两个
三
四

---

当第一个选择的值更改时，这会将第二个选择的值更改为第一个选择的值

功能数据\u副本（n）
{
document.querySelectorAll（'[NAME^=“state”]'）.forEach（el=>el.value=document.form1['state'+n].value）
}

陈述
一个
两个
三
四
陈述
一个
两个
三
四

您可以使用或任何其他

document.getElement…（）

函数获取对

的引用，并且在第一个函数更改后，将其值分配给第二个函数：

const state1 = document.getElementById('state1');
const state2 = document.getElementById('state2');

state1.onchange = function(e) {
    state2.value = e.target.value;
};

此外，您的代码还存在多个问题：

• 不允许包含在
  中，因此您可以用它包装整个表或将其放在单个单元格中。在元素内部，只能使用
  、
  、
  、
  、
  和

• 不带引号的

  HTML

  属性也是有效的，但是，如果它们包含不受信任的数据，则更难对其进行转义以避免XSS攻击。实际上，大多数

  HTML

  转义工具都会使用引号。无论如何，你也应该保持一致，所以要么使用双引号，要么使用单引号，要么根本不使用引号

• 您的

  HTML

  代码应该使用小写字母。虽然浏览器仍能理解大写字母，但使用小写字母是一种惯例，因为它具有更好的可读性。这来自于需要小写字母的旧格式

• 您还应该避免使用事件属性，以保持表示和逻辑分离，这也是由于内联元素的作用域是如何解析的
  另一个答案对此有很好的解释：

• 您不应该使用

  HTML

  属性来设置元素的样式。这就是CSS的问题
  实际上。。。在

  HTML5

  中都不受支持

• 最后，如果您只是为了布局而使用
  元素，没有任何语义含义，那么您应该使用其他元素，可能是
  和
  或只是
  ，并使用

  CSS

  定位它们
  虽然

  位置

  ，

  浮动

  和

  显示

  对于您的用例来说应该已经足够了，但可能会派上用场

总之，它应该是这样的：

const state1=document.getElementById（'state1'）；
const state2=document.getElementById（'state2'）；
state1.onchange=函数（e）{
state2.value=e.target.value；
};
正文{
字体系列：无衬线；
}
桌子{
背景：#FFF；
颜色：#000；
宽度：400px；
边界：无；
边界塌陷：塌陷；
}
运输署{
填充：.25rem；
}
挑选{
宽度：100%；
}
.传奇{
宽度：50px；
文本对齐：右对齐；
文本转换：大写；
字体大小：.75rem；
}
.按钮{
宽度：100%；
边界：无；
背景：#FFF；
填充：.5rem；
边界半径：2px；
颜色：#000；
文本转换：大写；
字体大小：.75rem；
保证金：1雷姆0；
长方体阴影：0 0 1rem rgba（0,0,0,25）；
过渡：箱影缓变为.125s；
}
.按钮：悬停{
盒影：0.5雷姆rgba（0,0,0,25）；
}

陈述
一个
两个
三
四
陈述
一个
两个
三
四
这是jquery…，因此需要添加jquery库。将测试并让您知道。谢谢你的帮助@SukhpreetSinghAlang您确实用jQueryMabe标记了您的问题，因为它是es6，如果您需要支持较旧的浏览器，您可以在BABEL中传输它，如
const state1 = document.getElementById('state1');
const state2 = document.getElementById('state2');

state1.onchange = function(e) {
    state2.value = e.target.value;
};