点击提交按钮跳转选中选项页面时URL异常的解决方法

Let's break down why this is happening first: when you click that submit button, the browser is first executing the default form submission behavior (which uses GET method by default, hence the /?department=... URL) before your JavaScript has a chance to handle the redirect properly. The default form action is overriding your custom redirect logic.

Here are two solid fixes you can implement:

Fix 1: Prevent the form's default submission behavior #

Update your JavaScript to stop the browser from doing its default form submit when the button is clicked. You just need to add event.preventDefault() to your click handler:

<form>
  <label for="department">Department</label>
  <select id="department" name="department">
    <option value="departments/scso.html">SCSO</option>
    <option value="departments/fsp.html">FSP</option>
    <option value="departments/dhs.html">DHS</option>
    <option value="departments/fng.html">FNG</option>
    <option value="departments/dot.html">DOT</option>
    <option value="departments/doc.html">DOC</option>
    <option value="departments/dpw.html">DPW</option>
    <option value="departments/scfd.html">SCFD</option>
  </select>
  <input type="submit" id="submit" value="Submit">
</form>

<script>
  var goBtn = document.getElementById("submit");
  var menu = document.getElementById("department");
  
  goBtn.onclick = function(event) {
    // Stop the browser's default form submit action
    event.preventDefault();
    // Now do your redirect
    window.location = menu.value;
  };
</script>

Alternatively, you can add the prevention at the form level using the onsubmit attribute for a more concise approach:

<form onsubmit="event.preventDefault(); window.location = document.getElementById('department').value;">
  <label for="department">Department</label>
  <select id="department" name="department">
    <option value="departments/scso.html">SCSO</option>
    <option value="departments/fsp.html">FSP</option>
    <option value="departments/dhs.html">DHS</option>
    <option value="departments/fng.html">FNG</option>
    <option value="departments/dot.html">DOT</option>
    <option value="departments/doc.html">DOC</option>
    <option value="departments/dpw.html">DPW</option>
    <option value="departments/scfd.html">SCFD</option>
  </select>
  <input type="submit" value="Submit">
</form>

Fix 2: Change the submit button to a regular button #

If you don't need the form's default submission behavior at all, just change the button's type from submit to button. This way, clicking it won't trigger any form submission logic, only your custom JavaScript:

<form>
  <label for="department">Department</label>
  <select id="department" name="department">
    <option value="departments/scso.html">SCSO</option>
    <option value="departments/fsp.html">FSP</option>
    <option value="departments/dhs.html">DHS</option>
    <option value="departments/fng.html">FNG</option>
    <option value="departments/dot.html">DOT</option>
    <option value="departments/doc.html">DOC</option>
    <option value="departments/dpw.html">DPW</option>
    <option value="departments/scfd.html">SCFD</option>
  </select>
  <!-- Change type to "button" to avoid default form submit -->
  <input type="button" id="submit" value="Submit">
</form>

<script>
  var goBtn = document.getElementById("submit");
  var menu = document.getElementById("department");
  
  goBtn.onclick = function() {
    window.location = menu.value;
  };
</script>

Both fixes will get you the clean /departments/__.html URL you're expecting instead of the parameterized one. Pick the one that fits your use case best!

内容的提问来源于stack exchange，提问作者iLordOfAviation ROBLOX