Question

我找到了带有按钮重定向代码的自定义选择下拉菜单。它可以使用一个下拉菜单，但是我想创建两个下拉菜单。我尝试为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。因此，重定向链接应为example.com/page。

这段代码有什么办法吗？

Answer 1

您正在使用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 2

您没有获得对第二个<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 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）

4 个答案: