title: Dependent <select> menus in HTML and JavaScript
body: <p>I have two <code>&lt;select&gt;</code> fields in my page. The first is shown below with some illustrative brand names:</p>
  
  <pre><code>    &lt;select name="1"&gt;
              &lt;option value="Apple"&gt;Apple&lt;/option&gt;
              &lt;option value="Samsung"&gt;Samsung&lt;/option&gt;
              &lt;option value="other"&gt;Other&lt;/option&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>If the user selects "Apple" in this first field, I would like the second to contain Apple's products for the user to choose from, such as</p>
  
  <pre><code>    &lt;select name="Apple"&gt;
              &lt;option value="iphone"&gt;iPhone 7&lt;/option&gt;
              &lt;option value="ipad"&gt;iPad Super Pro&lt;/option&gt;
              &lt;option value="other"&gt;Other&lt;/option&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>If it chooses "Samsung", however, I would like to update the second field's options accordingly.</p>
  
  <pre><code>    &lt;select name="Samsung"&gt;
              &lt;option value="note"&gt;Note 6&lt;/option&gt;
              &lt;option value="galaxy"&gt;Galaxy S8&lt;/option&gt;
              &lt;option value="other"&gt;Other&lt;/option&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>And if the user chooses "Other", I want an input field to be displayed.</p>
  
  <pre><code>    &lt;input type="text" name="other"/&gt;
  </code></pre>
  
  <p>How can I do that?</p>