时间戳

首页 > 解决方案 > 如何在Javascript中重写选项的文本？

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

问题描述

我遇到了一个问题：我不知道如何重写选择中选项的（内部）文本。

我的目标是这样的：

<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 只是为了节省时间

标签： javascripthtmlselect

解决方案

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

  • 首先，最好在代码中坚持使用不显眼的解决方案，并在一个或 JS 文件中处理所有逻辑，<script>而不是在 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>

此外，在您的特定情况下，由于您正在尝试更改 select 选项的内部文本，因此您之前尝试过的另一个选项是使用与 stext相同textContent且仅适用于HTMLOptionElements 的属性。

所以，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>

推荐阅读