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

Posted 2023-02-21

【中文标题】如何使用javascript选择一个选择选项html [重复]

【英文标题】：how to choose with javascript a select option html [duplicate]

【发布时间】：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;

进行设置

【参考方案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>