如何用JavaScript替换select选项文本？现有代码失效求替代方案

Hey there! Let's get that option text updated properly. The issue with your original code comes down to two small problems: an incorrect selector, and using the wrong property to update the text. Here's how to fix it:

Why Your Code Failed #

1. Selector Mismatch: Your code uses div.selector, but the <div> in your HTML doesn't have a selector class. That means the query couldn't find the element at all.
2. Wrong Property: DOM elements don't have a .text property. You need to use either textContent (the standard, recommended way) or innerText to modify the visible text.

Working Solutions #

Solution 1: Target the Option Directly with a Precise Selector #

Use the id or name of the <select> to narrow down your query, then target the option by its value:

// Find the specific option element
const englishOption = document.querySelector('select#input_29_14 option[value="English"]');

// Only update if the element exists (avoids errors)
if (englishOption) {
  englishOption.textContent = "Inglés";
}

Solution 2: Ensure Code Runs After DOM is Loaded #

If your script runs before the HTML is fully loaded, it won't find the element. Wrap your code in a DOMContentLoaded listener to guarantee it executes at the right time:

document.addEventListener('DOMContentLoaded', function() {
  const englishOption = document.querySelector('select[name="input_14"] option[value="English"]');
  if (englishOption) {
    englishOption.textContent = "Inglés";
  }
});

Alternative: Using innerText #

If you need to account for styling (like hidden text), you can use innerText instead of textContent—though textContent is generally preferred for performance and consistency:

englishOption.innerText = "Inglés";

Key Takeaways #

• Always double-check your selectors match the actual HTML structure
• Use textContent or innerText to modify element text (never .text)
• Wrap your DOM-manipulating code in a DOMContentLoaded listener to avoid "element not found" errors

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