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

Question

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

我的目标是这样的：

<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文件中的所有逻辑，而不是在HTML本身中处理它们。因此，我只是从HTML中删除了onclick处理程序，并将其移动到JS部分，并尝试通过addEventListener方法访问该元素并向其添加事件
• 如果您在查询选择器中选择了正确的元素，那么您的第一个代码段应该可以正常工作，因此您可以将选择器更改为document.querySelector('#example-dropdown option[value=example-option]')，但由于innerText的缺点(您可以在此处找到(，最好不要将其用于更改元素的内部文本
• 如果您不想使用innerText来弥补其缺点，可以使用innerHTML或textContent属性来更改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>

---

此外，在您的特定情况下，由于您正试图更改选择选项的内部文本，因此还有一个选项可供您选择，就像您之前尝试的那样，即使用与textContent相同的text属性，它仅适用于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>