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

Question

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

13

我能否使用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>

我似乎找不到关于如何做这件事的任何文档，所以任何帮助都将不胜感激。

- PhysicsIsRelativelyCool

3

这里想要实现什么目的？items = "Apple" || items = "Oranges" || items = "Bananas"; - messerbill

我想我明白了 - 你想根据输入字段中的内容更改选择选项。 - messerbill

这可能会有所帮助：https://www.w3schools.com/jsref/met_select_add.asp - Doug

1

双竖线符号 || 在 JavaScript 中表示 OR 语句，它不会分隔项目列表。 - Doug

实际的适当 SelectElement Add 文档。 - Nope

3个回答

10

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

通过上述语句，你在说items只能是苹果、橙子或香蕉中的一个...
你需要一个元素数组，像这样：
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>

- Calvin Nunes

1

@messerbill OP 询问如何动态添加选项到下拉列表。这个答案非常清晰地展示了如何实现。OP 可以将这个逻辑与自己的代码连接起来。答案不需要包含复制粘贴的解决方案。如果有什么需要，它们也永远不应该出现。 - Nope

4

你可以通过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>

- Jan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- messerbill · Accepted Answer

你可以在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>