为何选中选项需点击两次？单选后立即跳转的技术咨询

Hey there, let's tackle this problem head-on—you want a dropdown that jumps on a single selection (no double-clicks or Enter required), shows a visible selected state, and supports keyboard navigation with keycode access for screen reader users. Here's how to make it work:

First, Let's Diagnose the Root Issues #

• Double-click requirement: Likely because your current event setup is listening for the wrong trigger (e.g., a click on the select container instead of the option itself, or relying on onchange without proper state sync).
• Missing selected state: The browser's default styles might be subtle, or you're not explicitly updating the selection state when clicking.
• Accessibility & keycode needs: onchange fires immediately when the selection changes, but doesn't give you keycode data. We need to handle keyboard events directly to capture that.

Step-by-Step Solution #

1. Set Up Basic HTML & Visible Selected Styles

First, add a native select element and style the selected option so users can see their choice clearly:

<!-- Add an aria-label for screen readers -->
<select id="pageJump" aria-label="Navigate to a page">
  <option value="/page1">Home Page</option>
  <option value="/page2">About Us</option>
  <option value="/page3">Contact</option>
</select>

/* Make selected options stand out visually */
#pageJump option:checked {
  background-color: #2563eb;
  color: white;
}

2. Add JavaScript for Single-Click & Keyboard Support

We'll handle both mouse clicks and keyboard actions, capture keycodes for accessibility, and ensure instant navigation:

const jumpSelect = document.getElementById('pageJump');

// Handle mouse clicks on options (single-click jump)
jumpSelect.querySelectorAll('option').forEach(option => {
  option.addEventListener('click', () => {
    // Sync the select's value to the clicked option
    jumpSelect.value = option.value;
    // Navigate immediately
    window.location.href = option.value;
  });
});

// Handle keyboard navigation (for screen reader/Tab users)
jumpSelect.addEventListener('keydown', (e) => {
  const keyCode = e.keyCode;
  // Store this keycode for your后续 use (e.g., logging, accessibility tracking)
  console.log('User used keycode:', keyCode);

  // Trigger navigation on Enter (13) or Space (32)
  if (keyCode === 13 || keyCode === 32) {
    e.preventDefault(); // Prevent Space from scrolling the page
    window.location.href = jumpSelect.value;
  }
});

How This Works #

• Single-click jump: When a user clicks an option, we explicitly set the select's value to match the clicked option (which triggers the :checked style) and navigate right away—no double-clicks needed.
• Visible selected state: The CSS targets option:checked to highlight the selected option, so users get immediate visual feedback.
• Accessibility & keycodes: The keydown listener captures the keycode when users navigate with Tab and press Enter/Space. You can store this keycode for any后续 logic you need.

Bonus Tips for Better Accessibility #

• Always include an aria-label or aria-labelledby on the select to describe its purpose for screen reader users.
• If you're using a custom dropdown (not native select), make sure to manage focus states, support arrow key navigation, and sync aria attributes like aria-selected.

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