如何使用javascript选择一个选择选项html [重复]答案

【问题标题】：how to choose with javascript a select option html [duplicate]如何使用javascript选择一个选择选项html [重复]
【发布时间】：2021-06-27 22:15:21
【问题描述】：

我必须从 html 文件中选择一个选项：

<select id="color">
    <option>red</option>
    <option>yellow</option>
    <option>green</option>
    <option>orange</option>
</select>

例如，我想选择绿色。我已经试过了：

var color = "green"
document.getElementById("color").options.value = color;
document.getElementById("color").value = color;

但它们不起作用。（选项标签必须没有名称，id，...）

【问题讨论】：

这能回答你的问题吗？ How do I programmatically set the value of a select box element using JavaScript?
你说选项标签必须没有名字，id，...。这是否也包括值？因为如果您要将value="colorname" 添加到您的选项标签中，您应该可以通过document.getElementById("color").value = color; 进行设置

标签： javascript html

【解决方案1】：

把你的 HTML 改成这个；

<select id="color">
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="green">green</option>
    <option value="orange">orange</option>
</select>

那么下面的 JavaScript 应该可以工作了；

var color = "green"
document.getElementById("color").value = color;

以sn-p为例；

var color = "green"
document.getElementById("color").value = color;
console.log( document.getElementById("color").value );

<select id="color">
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="green">green</option>
    <option value="orange">orange</option>
</select>

如果由于某种原因无法添加 value 属性，您最终将不得不遍历选项标签并通过它来选择它们。

function selectColor( color )
{
  var select = document.getElementById("color");
  for ( var i=0; i<select.childNodes.length; i++ ) {
    if ( select.childNodes[i].textContent === color ) {
      select.childNodes[i].selected = true;
      return true;
    }
  }
  return false;
}
selectColor("green");
console.log( document.getElementById("color").value );

<select id="color">
    <option>red</option>
    <option>yellow</option>
    <option>green</option>
    <option>orange</option>
</select>

【讨论】：