带有链接的html选择标记，单击按钮后即可工作
带有链接的html选择标记，单击按钮后即可工作
提问于 2018-08-21 06:10:36
我想要一个select标签，选择一个选项，单击submit，然后转到某个链接。我在这里找到了一些解决方案，但并不是我想要的，例如，一些在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
Stack Overflow用户
回答已采纳
发布于 2018-08-21 06:17:40
首先，您需要删除事件，并通过向<form>添加一个事件侦听器来使用。在这个事件侦听器内部，您需要触发一个通过事件传递的函数(在下面的示例中为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;
});<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">
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51939139
复制相关文章
相似问题