title: Select Download File from One of Two Select Boxes with One Button - JavaScript
body: <p>I have two <code>select</code> boxes like so:</p>
  
  <pre><code>&lt;select id="one"&gt;
      &lt;option value="default"&gt;Select File&lt;/option&gt;
      &lt;option value="path/to/file1"&gt;File One&lt;/option&gt;
      &lt;option value="path/to/file2"&gt;File Two&lt;/option&gt;
      &lt;option value="path/to/file3"&gt;File Three&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="two"&gt;
      &lt;option value="default"&gt;Select File&lt;/option&gt;
      &lt;option value="path/to/file4"&gt;File Four&lt;/option&gt;
      &lt;option value="path/to/file5"&gt;File Five&lt;/option&gt;
      &lt;option value="path/to/file6"&gt;File Six&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;p class="button_image"&gt;
      &lt;a onclick="download(document.getElementById("one").value)"&gt;&lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>Here is my <code>download</code> function:</p>
  
  <pre><code>function download(file) {
      if (file == 'default') return;
      window.location = 'http://www.mysite.com/download/' + file;
  }
  </code></pre>
  
  <p>This works fine for one <code>select</code> box, but I can't seem to figure out how to use the same button image.  Oh yah, the <code>p.class=button_image</code> has background image that is a button with hover effects.</p>
  
  <p>The reason I want these <code>select</code> boxes to be separate is because they each represent a group of files, eg, 32-bit versus 64-bit.  So they cannot be combined, because it won't flow with the page design.</p>
  
  <p>I've tried some if/else blocks in PHP using the <code>getElementById</code> but I'm getting stuck.  This is what I tried and it seems to only partially work:</p>
  
  <pre><code>&lt;?php
  
  if ('document.getElementById(\"one\")' == 'one') {
      echo "&lt;a onclick='download(document.getElementById(\"one\").value)'&gt;&lt;/a&gt;";
  }
  
  else if ('document.getElementById(\"two\")' == 'two') {
      echo "&lt;a onclick='download(document.getElementById(\"one\").value)'&gt;&lt;/a&gt;";
  }
  
  ?&gt;
  </code></pre>
  
  <p>I should note that I don't necessarily need to use PHP in this case to solve this problem.  It was just an option I tried because I'm using PHP for the server-side programming.  I could be happy with any number of options, so long as they work.</p>
  
  <p>Thanks.</p>
  
  <p>** EDIT **</p>
  
  <p>This design might be flawed.  But the intention is that either a file from box one is downloaded OR a file from box two is downloaded.  If one selection is made, then the other should be rest to <code>default</code> and vice versa.  This is what I'm working on now.</p>
  
  <p>** EDIT **</p>
  
  <p>I ended up goign with Dawson Loudon's answer for one part and I created another function based on Barmar's comment that looks like this:</p>
  
  <pre><code>// resets other select box when selected
  function reset_index(id) {
      document.getElementById(id).selectedIndex = 'default';
  }
  </code></pre>