如何实现页面跳转后目标页面下拉框默认选中对应选项

Got it, let's fix this so your dropdown automatically highlights the current page when you navigate to it. Here's a straightforward approach that works across all your pages:

The Core Idea #

We'll add a small JavaScript function that:

1. Grabs the filename of the current page (like page1.html from the URL)
2. Finds the corresponding option in the dropdown
3. Sets that option as selected when the page loads

Modified Code for All Pages #

Update each page's HTML (including index.html if you want it to highlight too) with this code. Let's use page1.html as an example:

<div>
  <select id="sel" onchange="javascript:handleSelect(this)">
    <option value="page1.html/">page1</option>
    <option value="page2.html/">page2</option>
    <option value="page3.html/">page3</option>
    <option value="page4.html/">page4</option>
  </select>
</div>

<script>
// Keep your existing handleSelect function
function handleSelect(elm){
  window.location = elm.value;
}

// New function to set the selected option
function setCurrentPageAsSelected() {
  // Get the current page's filename (e.g., "page1.html")
  const currentPage = window.location.pathname.split('/').pop();
  
  // Find the option whose value matches the current page (accounting for the trailing slash in your values)
  const targetOption = document.querySelector(`#sel option[value="${currentPage}/"]`);
  
  // If we found the option, mark it as selected
  if (targetOption) {
    targetOption.selected = true;
  }
}

// Run the function when the page finishes loading
window.addEventListener('load', setCurrentPageAsSelected);
</script>

How It Works #

• window.location.pathname.split('/').pop() extracts just the filename from the full URL, so even if your site is in a subfolder, it still grabs the right page name.
• The document.querySelector line uses an attribute selector to find the option with a value exactly matching currentPage/ (since your options have that trailing slash).
• We use window.addEventListener('load', ...) to make sure the function runs only after the dropdown element is fully loaded on the page.

Bonus: Clean Up Duplication #

If you don't want to copy this script to every page, you can move the JavaScript into a separate file (like nav-utils.js) and link it in each page's <head>:

<script src="nav-utils.js"></script>

This way, you only have to update the code once if you need to tweak it later.

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