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

Question

我想根据另一个下拉菜单中的设置来设置下拉菜单值。

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”更改为其他任何内容，都会有一个新的“Höjd”，其元素ID和名称也不同-因此，如果在将“ Bredd”更改为标准5（480毫米）之外的任何内容后更改“Höjd” ）“Höjd”将不会更改其底部的相应下拉列表。

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

  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
}

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

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

Answer 1

我只是尝试了您的方法，并且对两种方法都有效。 您能检查一下我的密码吗？

 <!doctype html> <html> <head> </head> <title>Test Javascript</title> <h1>Test JS</h1> <body> <label>Select 1</label> <select id="select1">\\ <option value="10">10 mm</option> <option value="11">11 mm</option> <option value="12">12 mm</option> <option value="13">13 mm</option> <option value="14">14 mm</option> <option value="15">15 mm</option> </select> <label>Select 2</label> <select id="select2">\\ <option value="20">20 mm</option> <option value="21">21 mm</option> <option value="22">22 mm</option> <option value="23">23 mm</option> <option value="24">24 mm</option> <option value="25">25 mm</option> </select> <label>Select 1 Dup</label> <select id="select1_dup">\\ <option value="10">10 mm</option> <option value="11">11 mm</option> <option value="12">12 mm</option> <option value="13">13 mm</option> <option value="14">14 mm</option> <option value="15">15 mm</option> </select> <label>Select 2 Dup</label> <select id="select2_dup">\\ <option value="20">20 mm</option> <option value="21">21 mm</option> <option value="22">22 mm</option> <option value="23">23 mm</option> <option value="24">24 mm</option> <option value="25">25 mm</option> </select> <script type="text/javascript"> document.getElementById("select1").onchange = function() { console.log("select 1", this.options[this.selectedIndex]); document.getElementById("select1_dup").value = this.options[this.selectedIndex].getAttribute("value"); }; document.getElementById("select2").onchange = function() { console.log("select 2", this.selectedIndex); document.getElementById("select2_dup").value = this.options[this.selectedIndex].getAttribute("value"); }; </script> </body> </html>

我不认为document.getElementById（“ tmcp_select_1”）。onchange（）; 是必需的。

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

问题描述

1 个解决方案

解决方案1
-1 2017-06-20 12:57:02

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

问题描述

1 个解决方案

解决方案1 -1 2017-06-20 12:57:02

解决方案1
-1 2017-06-20 12:57:02