如何在 Javascript 中重写选项的文本？

Question

我遇到了一个问题：我不知道如何重写选择中选项的（内部）文本。我的目标是这样的：<select id="example-dropdown">     <option id="option-id" value="example-option">Example</option></select><button id="change-option-text-btn" onclick="document.querySelector('#option-id').innerText = 'Example 2'">Click Me</button>我知道这可能是重复的，但我找到的所有答案都不适合我（我也找到了一些 jQuery 的，我不知道它们是否都不起作用），例如：document.querySelector("#example-dropdown").options[0].text = "Example 2"没有遇到任何错误信息。编辑：好的，对不起，我没有说：这只是一个示例代码，onclick 只是为了节省时间

Answer 1

好吧，您当前的代码存在一些问题，我将在此处简要指出。

• 首先，最好在代码中坚持不显眼的<script>解决方案，并在JS 文件或 JS 文件中处理所有逻辑，而不是在 HTML 本身中处理它们。因此，为此，我只是onclick从 HTML 中删除了处理程序并将其移动到 JS 部分，并尝试访问该元素并通过addEventListener方法向其添加事件。

• 如果您在查询选择器中选择了正确的元素，您的第一个片段应该会按预期工作，因此您可以将选择器更改为document.querySelector('#example-dropdown option[value=example-option]')，但是由于innerText缺点，最好根本不要使用它来更改元素的内部文本。

• 如果您不想使用innerText它的缺点，可以使用innerHTMLortextContent属性来更改 HTML 标记的内容。这就是你的情况，因为你只是想单独更改你需要使用的选项的文本textContent。

你的最终代码应该是这样的：

const btn = document.querySelector('#change-option-text-btn');

const select = document.querySelector('#example-dropdown');

btn.addEventListener('click', function() {

  select.options[0].textContent = 'Example 2'

});

<select id="example-dropdown">

  <option value="example-option">Example</option>

</select>

<button id="change-option-text-btn">Click Me</button>

此外，在您的特定情况下，由于您正在尝试更改选择选项的内部文本，因此您还有一个选择，因为您之前尝试过的是使用与texts .textContentHTMLOptionElement

^{所以，document.querySelector("#example-dropdown").options[0].text应该为你做的工作。}

它将是这样的：

const btn = document.querySelector('#change-option-text-btn');

const select = document.querySelector('#example-dropdown');

btn.addEventListener('click', function() {

  select.options[0].text = 'Example 2'

});

<select id="example-dropdown">

  <option value="example-option">Example</option>

</select>

<button id="change-option-text-btn">Click Me</button>