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

【问题标题】：Change <select> options with javascript dynamically使用 javascript 动态更改 <select> 选项
【发布时间】：2018-08-13 08:25:20
【问题描述】：

我可以使用 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>

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

【问题讨论】：

items = "Apple" || items = "Oranges" || items = "Bananas";你想在这里实现什么？
我想我明白了 - 您想根据您在输入字段中输入的内容更改选择选项
这可能会有所帮助：w3schools.com/jsref/met_select_add.asp
双管道符号 ||表示 JavaScript 中的 OR 语句，它不会对项目列表进行分层。
实际正确的SelectElement Add 文档。

标签： javascript if-statement select

【解决方案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>

【讨论】：

这太棒了——正是我所希望的。但是，当我复制代码时，它似乎不起作用。是否有它依赖的脚本库？
澄清一下，我的 html 部分没有问题，但是当我在记事本中测试它时，点击似乎什么也没做
@PhysicsIsRelativeCool 不，不需要库。如果您粘贴 HTML 代码和 js 这应该可以工作。如果没有，你错过了什么
是的，你是对的！您的代码完美运行，我必须在 select 元素之后加载脚本，而不是在

【解决方案2】：

你的逻辑不是很正确，特别是你尝试这样做的地方
items = "Apple" || items = "Oranges" || items = "Bananas";

上面的陈述你说itens是苹果或橙子或香蕉，一次只有一个...... 你需要一个元素数组，像这样：
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);
}

&lt;select id="mySelect"&gt;&lt;/select&gt;

有了它，现在你可以实现你想要的，只需遵循这个逻辑......
如果需要，您还可以添加一个“if”语句来检查输入值是什么，然后根据输入值设置选项，就像您已经尝试做的那样。

【讨论】：

@messerbill OP 询问如何将项目动态添加到选择中。这个答案非常清楚地展示了这一点。 OP 可以将该逻辑与他们自己的代码挂钩。答案不需要包含复制粘贴解决方案。如果有的话，他们永远不应该。

【解决方案3】：

您可以使用 JavaScript 轻松更改选项。我建议使用额外的库来简化 DOM 操作，例如 JQuery。示例代码类似于下面的示例。您必须确保定义应更改选项的事件。该示例侦听输入字段中的变化。

<input type="text" id="food" value="vegetables"/>
<select id="pickone"></select>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

<script>
var fruits = ["Apple", "Oranges", "Bananas"];
var vegetables = ["Eggplants", "Olives"];

vegetables.forEach(function(item){
    $('#pickone').append("<option>" + item + "</option>");
});

$('body').on('keyup', '#food', function (){
    if ($('#food').val() === 'fruits') {
        $('#pickone').html("");
        fruits.forEach(function(item){
            $('#pickone').append("<option>" + item + "</option>");
        });
    }
});

</script>

【讨论】：