使用Javascript获取和设置下拉菜单的值

我想根据在另一个下拉列表中设置的内容设置一个下拉列表值

window.onload=function() { 
  document.getElementById("tmcp_select_1").onchange=function() {
    document.getElementById("tmcp_select_75").value=this.options[this.selectedIndex].getAttribute("value"); 
  }
  document.getElementById("tmcp_select_1").onchange(); // trigger when loading MYGGNAT

  document.getElementById("tmcp_select_2").onchange=function() {
    document.getElementById("tmcp_select_76").value=this.options[this.selectedIndex].getAttribute("value"); 
  }
  document.getElementById("tmcp_select_2").onchange(); // trigger when loading MYGGNAT
}

这是我尝试过的代码，它成功了：）。然而，有一个问题。关于这个 您可以在标题“Bredd”下看到第一个下拉菜单，无论设置了什么，都会在底部设置相同外观下拉菜单的值。但对于该下拉列表上的每个选择，旁边都有一个新的选项（标题“Höjd”）因此，如果“Bredd”下拉列表为“5（480 mm）”，并且您更改了“Höjd”下拉列表，则该选项也将起作用。但是，如果您将第一个下拉列表“Bredd”更改为其他任何内容，则将有一个具有不同元素ID和名称的新“Höjd”-因此，如果在将“Bredd”更改为标准5（480 mm）以外的任何内容后更改“Höjd”，则“Höjd”不会更改其底部的相应下拉列表

当我试图将其添加到上面的代码时，它不起作用（我猜是因为它与上面的行冲突）：

我可以通过成像来获取元素CSS选择器语法是否可行？在该位置获取下拉列表的值，而不是通过其ID或名称。 或者它是否可以查找元素，如果找不到，则尝试下一个元素？ 因此，如果找不到tmpc_select_2，请尝试tmpc_select_3，以此类推

---

编辑：刚刚意识到底部的两个下拉列表：如果底部的“Bredd”更改，底部的“Höjd”也应该更改（更改为相同的，但不同的基本值/价格）

我刚刚尝试了你的方法，它对两个选择都有效。你能查一下我的密码吗

测试Javascript
测试JS
选择1
\
10毫米
11毫米
12毫米
13毫米
14毫米
15毫米
选择2
\
20毫米
21毫米
22毫米
23毫米
24毫米
25毫米
选择1个Dup
\
10毫米
11毫米
12毫米
13毫米
14毫米
15毫米
选择2个Dup
\
20毫米
21毫米
22毫米
23毫米
24毫米
25毫米
document.getElementById（“select1”）.onchange=function（）{
log（“选择1”，this.options[this.selectedIndex]）；
document.getElementById（“select1_dup”）.value=this.options[this.selectedIndex].getAttribute（“value”）；
};
document.getElementById（“select2”）.onchange=function（）{
console.log（“选择2”，this.selectedIndex）；
document.getElementById（“select2_dup”）.value=this.options[this.selectedIndex].getAttribute（“value”）；
};

我刚刚尝试了你的方法，它对两种选择都有效。你能查一下我的密码吗

测试Javascript
测试JS
选择1
\
10毫米
11毫米
12毫米
13毫米
14毫米
15毫米
选择2
\
20毫米
21毫米
22毫米
23毫米
24毫米
25毫米
选择1个Dup
\
10毫米
11毫米
12毫米
13毫米
14毫米
15毫米
选择2个Dup
\
20毫米
21毫米
22毫米
23毫米
24毫米
25毫米
document.getElementById（“select1”）.onchange=function（）{
log（“选择1”，this.options[this.selectedIndex]）；
document.getElementById（“select1_dup”）.value=this.options[this.selectedIndex].getAttribute（“value”）；
};
document.getElementById（“select2”）.onchange=function（）{
console.log（“选择2”，this.selectedIndex）；
document.getElementById（“select2_dup”）.value=this.options[this.selectedIndex].getAttribute（“value”）；
};

您好，谢谢您的回复！它工作正常，但仍然有一些奇怪的事情发生。尝试现在进入链接，将顶部的“Bredd”更改为18，然后查看最终价格。然后将底部的“Bredd”改为18，然后再改回18-第一个价格不正确-然而，将底部的“Bredd”改为17后的第二个价格改回18是正确的：PHello感谢您的回复！它工作正常，但仍然有一些奇怪的事情发生。尝试现在进入链接，将顶部的“Bredd”更改为18，然后查看最终价格。然后将底部的“Bredd”更改为18，然后再次更改为18-第一个价格不正确-但是更改为17后的第二个价格更改为18是正确的：P

  document.getElementById("tmcp_select_3").onchange=function() {
    document.getElementById("tmcp_select_76").value=this.options[this.selectedIndex].getAttribute("value"); 
  }
  document.getElementById("tmcp_select_3").onchange(); // trigger when loading MYGGNAT
}