title: Change <select> options with javascript dynamically
body: <p>Can I use a javascript if/else function to change the select options of a form? I don't want to use CSS to hide/display different dropdown menus, so here is what I've ccome up with:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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;
  }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&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;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can't seem to find any documentation about how to do this, so any help would be great.</p>