Question

我可以使用javascript if / else函数来更改表单的选择选项吗？我不想使用CSS来隐藏/显示不同的下拉菜单，所以这就是我所熟悉的： function getType（）{ var x = document.getElementById（“food”）。value; var项目; if（x ===“fruit”）{ items =“Apple”|| items =“橘子”|| items =“香蕉”; 其他{ items =“茄子”|| items =“橄榄” } 。的document.getElementById（ “pickone”）值; } ＆lt; input type =“text”id =“food”＆gt; ＆lt; select id =“pickone”＆gt; ＆lt; option id =“1”＆gt;＆lt; / option＆gt; ＆lt; option id =“2”＆gt;＆lt; / option＆gt; ＆LT; /选择＆GT; 我似乎无法找到有关如何执行此操作的任何文档，因此任何帮助都会很棒。

Answer 1

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

上面的陈述你说itens是Apple OR Oranges或Bananas，只有一个...... 你需要一系列元素，如下所示：
var itens = ["Apple", "Oranges", "Bananas"];

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

＆＃13;

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

＆＃13;

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

＆＃13;

有了它，现在你可以实现你想要的，只需遵循这个逻辑......
您也可以根据需要添加if来检查输入值是什么，然后根据输入值设置选项，就像您已经尝试过的那样！

Answer 2

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

＆＃13;

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)

＆＃13;

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

＆＃13;

Answer 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>

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

3 个答案: