Select Download File from One of Two Select Boxes with One Button - JavaScript

I have two select boxes like so:

<select id="one">
    <option value="default">Select File</option>
    <option value="path/to/file1">File One</option>
    <option value="path/to/file2">File Two</option>
    <option value="path/to/file3">File Three</option>
</select>

<select id="two">
    <option value="default">Select File</option>
    <option value="path/to/file4">File Four</option>
    <option value="path/to/file5">File Five</option>
    <option value="path/to/file6">File Six</option>
</select>

<p class="button_image">
    <a onclick="download(document.getElementById("one").value)"></a>
</p>

Here is my download function:

function download(file) {
    if (file == 'default') return;
    window.location = 'http://www.example.com/download/' + file;
}

This works fine for one select box, but I can't seem to figure out how to use the same button image. Oh yah, the p.class=button_image has background image that is a button with hover effects.

The reason I want these select 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.

I've tried some if/else blocks in PHP using the getElementById but I'm getting stuck. This is what I tried and it seems to only partially work:

<?php
                        
if ('document.getElementById(\"one\")' == 'one') {
    echo "<a onclick='download(document.getElementById(\"one\").value)'></a>";
}

else if ('document.getElementById(\"two\")' == 'two') {
    echo "<a onclick='download(document.getElementById(\"one\").value)'></a>";
}

?>

I should mention that PHP isn't strictly necessary for this. I simply tried it because of its use in the server-side code. I'm happy to consider any working solution.

Thanks.

** EDIT **

This design may be flawed, but the intention is to allow the download of either a file from box one or a file from box two. Selecting one should reset the other to its default state, and vice versa. I'm currently working on implementing this.

** EDIT **

I ultimately chose Dawson Loudon's answer for one part, and I created a separate function based on Barmar's comment, as follows:

// resets other select box when selected
function reset_index(id) {
    document.getElementById(id).selectedIndex = 'default';
}

Solution

Try replacing this:

<p class="button_image">
    <a onclick="download(document.getElementById('one').value)"></a>
</p>

with:

<p class="button_image">
    <a onclick="download(document.getElementById('one').value, document.getElementById('two').value)"></a>
</p>

and then replace your download function with this:

function download(file1,file2) {
    if (file1 == 'default' && file2 == 'default'){
      return;
    }
    else if(file1 != 'default'){
      window.location = 'http://www.mysite.com/download/' + file1;
    }
    else{
      window.location = 'http://www.mysite.com/download/' + file2;
    }
}