Change <select> options with javascript dynamically

You could append a string for the options and set it as innerHTML of your select field afterwards:

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>

Your logic is not very right, specially where you try to do this
items = "Apple" || items = "Oranges" || items = "Bananas";

with the above statement you are saying that itens are Apple OR Oranges OR Bananas, only one at once... you'll need an array of elements, like this:
var itens = ["Apple", "Oranges", "Bananas"];

Then, you will need to loop through it to add them to the select, like this:

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>

With that, now you can achieve what you want, just follow this logic...
you can also, if you want, add an `if` statement to check what is the input value, then set the options based on the input value, as you are already trying to do.