使用 javascript 动态更改 <select> 选项

Question

我可以使用 javascript if/else 函数来更改表单的选择选项吗？我不想使用 CSS 来隐藏/显示不同的下拉菜单，所以这是我想出的：

function getType() {
  var x = document.getElementById("food").value;
  var items;

  if (x === "fruit") {
    items = "Apple" || items = "Oranges" || items = "Bananas";
  else {
    items = "Eggplants" || items = "Olives"
  }
  document.getElementById("pickone").value;
}
 

<input type="text" id="food">

 <select id="pickone">
   <option id="1"></option>
   <option id="2"></option>
 </select>

我似乎找不到任何有关如何执行此操作的文档，因此任何帮助都会很棒。

Answer 1

您可以为 附加一个字符串，options然后将其设置为innerHTML您的选择字段：

function getType() {
  var x = document.getElementById("food").value;
  var items;
  if (x === "fruit") {
    items = ["Apple", "Oranges", "Bananas"];
  } else {
    items = ["Eggplants", "Olives"]
  }
  var str = ""
  for (var item of items) {
    str += "<option>" + item + "</option>"
  }
  document.getElementById("pickone").innerHTML = str;
}
document.getElementById("btn").addEventListener("click", getType)

<input type="text" id="food">
<button id="btn">click</button>
<select id="pickone">
</select>

Answer 2

您的逻辑不太正确，特别是在您尝试
items = "Apple" || items = "Oranges" || items = "Bananas";

使用上述语句执行此操作时，您说的itens是 Apple OR Oranges OR Bananas，一次只有一个……您将需要一组元素，如下所示：
var itens = ["Apple", "Oranges", "Bananas"];

然后，您需要遍历它以将它们添加到选择中，如下所示：

var itens = ["Apple", "Orange", "Banana"];
var selectElem = document.getElementById("mySelect");

for (var i = 0; i < itens.length; i++){
  var item = itens[i];
  var element = document.createElement("option");
  element.innerText = item;
  selectElem.append(element);
}

<select id="mySelect"></select>

有了这个，现在你可以实现你想要的，只要按照这个逻辑......
你也可以，如果你愿意，添加一个`if`语句来检查输入值是什么，然后根据输入值设置选项，正如您已经在尝试做的那样。