html選擇帶有單擊按鈕后工作的鏈接的標簽

Question

我想要一個選擇標簽，選擇一個選項，點擊提交，然后轉到某個鏈接。 我在這里找到了一些解決方案，但不是我要找的，例如，有些在 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>

Answer 1

首先，您需要刪除該onclick事件並通過向<form>添加事件偵聽器來使用不顯眼的 JavaScript 。 在此事件偵聽器內部，您需要觸發一個傳遞事件的函數（在以下示例中為e ），以便您可以使用e.preventDefault()阻止默認提交。

然后，您需要使用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>