多个下拉菜单重定向到 URL ( HTML )

Question

我找到了带有按钮重定向代码的自定义 select 下拉菜单。它适用于一个下拉菜单，但我想制作两个下拉菜单。我尝试为 select-id2 添加 var，但脚本停止工作并且没有任何反应。

<select id="select-id1">
    <option value="" selected="">First category</option>
    <option value="http://example.com">Example</option>
</select>

<select id="select-id2">
    <option value="" selected="">Second category</option>
    <option value="/page">Page</option>
</select>

<button onclick="siteRedirect()">GO</button>

<script>
    function siteRedirect() {
        var selectbox = document.getElementById("select-id");
        var selectedValue = selectbox.options[selectbox.selectedIndex].value;
        window.location.href = selectedValue;
    }
</script>

第一个 (select-id1) 应该有域 example.com，第二个 (select-id2) 应该在第一个上添加 /page。所以重定向 link 应该是 example.com/page.

有什么办法可以处理这段代码吗？

Answer 1

您没有获得对第二个 <select> 元素的引用。您刚刚将它添加到您的 HTML，您的脚本并不知道它。

var selectbox2 = document.getElementById("select-id2");

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

这将使它重定向到 select-id2 选项元素

的任何值

<select id="select-id2">
  <option value="" selected="">Second category</option>
  <option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>
<script>
  function siteRedirect() {
    var selectbox = document.getElementById('select-id2');
    var selectedValue = selectbox.options[selectbox.selectedIndex].value;
    window.location.href = selectedValue;
  }
</script>

Answer 2

您正在搜索 id="select-id" 的元素。当只有 select-id1 和 select-id2 存在时。

试试这个：

function siteRedirect() {
var select1 = document.querySelector("#select-id1"),
    select2 = document.querySelector("#select-id2");
var category = select1.options[select1.selectedIndex].value,
    subcategory = select2.options[select2.selectedIndex].value;
    redirect = category+subcategory;
console.log("Redirect to: "+redirect);
}

<select id="select-id1">
<option value="" selected="">First category</option>
<option value="http://example.com">Example</option>
</select>
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>

Answer 3

您想将拆分的 URL 连接在一起，为此，您必须连接两个部分，您可以简单地解析 JS 上的值（因为 JavaScript 已经将数据作为字符串存储到变量中，所以你不应该有问题）

逻辑大致是这样的:

var link1 = document.getElementById("select-id1").value;
var link2 = document.getElementById("select-id2").value;
var joined = link1 + link2

function siteRedirect() {
  window.location.href = joined;
}

看看对你有没有帮助

Answer 4

就是这样！谢谢大家，尤其是 k3llydev!

所以。最终代码是：

<html>
<head>
</head>
<body>
<select id="select-id1">
<option value="" selected="">First category</option>
<option value="example.com">Example</option>
</select>
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>

<script>
function siteRedirect() {
var select1 = document.querySelector("#select-id1"),
select2 = document.querySelector("#select-id2");
var category = select1.options[select1.selectedIndex].value,
subcategory = select2.options[select2.selectedIndex].value;
redirect = category+subcategory;
/*console.log("Redirect to: "+redirect);*/
window.location.href = redirect;
}
</script>
</body>
</html>

已解决！

多个下拉菜单重定向到 URL ( HTML )

Multiple dropdown redirect to URL ( HTML )

html

javascript

html-select