JavaScript:如何修改<选项>

JavaScript: How to modify value in <option>

本文关键字：lt 选项 gt 修改 何修改 JavaScript      更新时间：2023-09-26

如何修改<option>的值？

我试过：

var example = document.getElementById("test"); // This is the <option>  
example.value = "Test";

上面的代码没有修改任何内容
但是，如果上面的代码修改了<select>显示值的值，则该值为空；

使用example.textContent更改显示的值。选择option元素时显示的值是其文本内容。

然而，正如Oriol的回答所示，更改value属性是有意义的，即使它不是立即可见的。

document.getElementById("change").onclick = function () {
    var option = document.getElementById("test");
    option.textContent = "bon soir";
    option.value = "les étoiles sont belles, hein?";
}
document.getElementById("selector").onchange = function() {
    // in this line "this" refers to the <select> element
    document.getElementById("selection").textContent = this.value;
}
<select id="selector">
    <option></option>
    <option id="test" value="good to see you">hello</option>
    <option value="see you again">goodbye</option>
</select>
<input type="button" id="change" value="Change value" />
<div id="selection"></div>

选项的value及其文本是不同的。

当选择它的value时，它将成为select的value，并在提交表单时发送到服务器。类似地，当您设置select的值时，所选的option将是具有该value的那个。

您想要更改的是它的文本，例如使用以下其中之一：

option.textContent = "Test";
option.innerHTML = "Test";

在realy中，您需要了解option元素如何sintax。

<option value="my_value">The Label</option>

因此，您需要更改textContent值。请参阅下面的示例。

document.getElementById('change').onclick = function () {
  document.getElementById('my_option').textContent = 'My New Label';
  document.getElementById('my_option').value = 'my_new_value';
}
<select>
  <option id="my_option" value="my_value">My Label</option>
</select>
<button id="change" type="button">change</button>

第一个更改标签（用户的昵称），第二个更改发送到服务器的值。

相关文章：