如何将多个下拉值作为 URL 参数传递？

Question

I'm basically trying to create a form, with 2 dropdowns and pass the values from select as URL parameters through a from submit button,我基本上是在尝试创建一个带有 2 个下拉列表的表单，并通过提交按钮将 select 中的值作为 URL 参数传递，

 <form action=""> <select id="Select1"> <option value="1">Tshirt</option> <option value="2">Hat</option> <option value="3">Sweater</option> <option value="4">Hoodie</option> </select> <select id="Select2"> <option value="1">Red</option> <option value="2">Yellow</option> <option value="3">Pink</option> </select> <input type="submit" value="Submit"> </form>

If none of the dropdowns are selected, the url should be: domain.com如果未选择任何下拉菜单，则 url 应为： domain.com
If the first value is selected, the url should be: domain.com/Tshirt如果选择第一个值，则 url 应为：domain.com/Tshirt
Otherwise if both options are selected, the url should be: domain.com/Tshirt/Red否则，如果同时选择这两个选项，则 url 应为：domain.com/Tshirt/Red

Thanks a lot !非常感谢！

Answer 1

Add click event listener on submit button and get text property of selected dropdown option.在提交按钮上添加click事件侦听器并获取所选下拉选项的text属性。

 const submitBtn = document.querySelector("#submitBtn"); submitBtn.addEventListener("click", () => { const select1 = document.querySelector("#Select1"); const select2 = document.querySelector("#Select2"); const val1 = select1.options[select1.selectedIndex].text?? ""; const val2 = select2.options[select2.selectedIndex].text?? ""; const url = `domain.com/${val1}/${val2}`; console.log(url); })

 <html> <head></head> <body> <select id="Select1"> <option value="1">Tshirt</option> <option value="2">Hat</option> <option value="3">Sweater</option> <option value="4">Hoodie</option> </select> <select id="Select2"> <option value="1">Red</option> <option value="2">Yellow</option> <option value="3">Pink</option> </select> <input id="submitBtn" type="submit" value="Submit"> </body> </html>

如何将多个下拉值作为 URL 参数传递？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-05-19 18:03:49

如何将多个下拉值作为 URL 参数传递？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-05-19 18:03:49

解决方案1
1 已采纳 2021-05-19 18:03:49