html select标记,其中包含单击按钮后有效的链接

时间:2018-08-20 22:10:36

标签: javascript html

我想要一个选择标签,选择一个选项,单击提交,然后转到某个链接。我在这里找到了一些解决方案,但不是我要找的解决方案,例如,一些在select标记上使用了onchange,但是在单击按钮之前它会转到链接,我正在寻找使用php或javascript(没有jquery)的解决方案。 这是我尝试过的方法,我不知道它是否正确。请帮助,谢谢。

<form>
    <select class="custom-select" id="select" >
      <option selected>Choose...</option>
      <option value="page1.php">1</option>
      <option value="page2.php">2</option>
      <option value="page3.php">3</option>
      <option value="page4.php">4</option>
    </select><br>
    <input class=" rech btn btn-outline-success btn-lg" type="submit" value="RECHERCHER" onClick="location=document.getElementById('select').value;"><br>
</form>

1 个答案:

答案 0 :(得分:0)

首先,您需要删除该 onclick 事件,并通过向{{1 }}。在此事件侦听器内部,您将希望触发一个通过事件的函数(在下例中为<form>),以便您可以使用 unobtrusive JavaScript 阻止默认提交strong>。

然后,您将想要通过e手动更改位置,只需简单地通过window.location.href即可获取所选的值。

这可以在下面看到:

select.value
const form = document.getElementsByTagName('form')[0];
const select = document.getElementById('select');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  console.log(select.value);
  // window.location.href = select.value;
});