使用Javascript获取和设置下拉菜单的值
[英]Getting and setting values of dropdown menu with Javascript
问题描述
I would like to set a dropdown value based on what is set in another dropdown. 
我想根据另一个下拉菜单中的设置来设置下拉菜单值。
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
}
This is the code I tried, and it worked :). 这是我尝试过的代码，并且有效:)。 There is a problem however. 但是有一个问题。 On this link you can see the first dropdown menu under heading "Bredd", whatever is set there sets the value of the same looking dropdown menu at the bottom. 在此链接上，您可以在标题“ Bredd”下看到第一个下拉菜单，无论该设置如何，都将在底部设置相同外观的下拉菜单的值。 But for every selection on the that dropdown there is a new one beside it (under heading "Höjd") so if "Bredd" dropdown is "5 (480 mm)" and you change the "Höjd" dropdown - that one will work as well. 但是对于该下拉列表中的每个选择，旁边都有一个新选项（在标题“Höjd”下），因此，如果“ Bredd”下拉列表为“ 5（480 mm）”，并且您更改了“Höjd”下拉列表，则该下拉列表将作为好。 However if you change the first dropdown "Bredd" to anything else there will be a new "Höjd" with a different element ID and name - thus if you change "Höjd" after changed "Bredd" to anything other than standard 5 (480 mm) the "Höjd" will not change its corresponding dropdown at the bottom. 但是，如果将第一个下拉菜单“ Bredd”更改为其他任何内容，都会有一个新的“Höjd”，其元素ID和名称也不同-因此，如果在将“ Bredd”更改为标准5（480毫米）之外的任何内容后更改“Höjd” ）“Höjd”将不会更改其底部的相应下拉列表。
When I tried to add this to the code above it did not work (I guess because its conflicting with rows above): 当我尝试将其添加到上面的代码中时，它不起作用（我猜是因为它与上面的行冲突）：
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
}
I can imaging instead to get elements CSS selector syntax might work? 我可以成像来获取元素CSS选择器语法是否可以工作？ To get value of the dropdown in that place rather than by its ID or name. 在该位置获取下拉列表的值，而不是通过其ID或名称来获取。 Or if it could look for element and if not found try the next one? 还是可以寻找元素，如果找不到，请尝试下一个？ So if it can't find tmpc_select_2, try tmpc_select_3, etc. 因此，如果找不到tmpc_select_2，请尝试tmpc_select_3，依此类推。
EDIT: just realised that the bottom two dropdowns: if bottom "Bredd" changes the bottom "Höjd" should change as well (to an identical one but different underlying values/price) 编辑：刚意识到底部的两个下拉列表：如果底部的“ Bredd”更改底部的“Höjd”也应更改（更改为相同的但基本价格/价格不同）
1 个解决方案
解决方案1
-1 2017-06-20 12:57:02
I just tried your approach and it's working for both the select. 我只是尝试了您的方法，并且对两种方法都有效。 Could you please check my code? 您能检查一下我的密码吗？
<!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>
I don't think document.getElementById("tmcp_select_1").onchange(); 我不认为document.getElementById（“ tmcp_select_1”）。onchange（）; is needed. 是必需的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.