javascript - 通过一键选择从两个选择框之一下载文件 - JavaScript

Question

我有两个选择框，如下所示:

<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>

这是我的下载功能:

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

这对于一个选择框来说效果很好，但我似乎不知道如何使用相同的按钮图像。哦，是的，p.class=button_image 的背景图像是一个具有悬停效果的按钮。

我希望这些选择框是分开的，因为它们各自代表一组文件，例如，32位与64位。所以它们不能组合起来，因为它不会与页面设计相一致。

我已经使用 getElementById 在 PHP 中尝试了一些 if/else block ，但我遇到了困难。这是我尝试过的，但似乎只部分有效:

<?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>";
}

?>

我应该注意，在这种情况下我不一定需要使用 PHP 来解决这个问题。这只是我尝试过的一个选项，因为我使用 PHP 进行服务器端编程。我可以对任何数量的选择感到满意，只要它们有效。

谢谢。

** 编辑 **

这个设计可能有缺陷。但其目的是下载框一中的文件或下载框二中的文件。如果进行了一项选择，则另一项应保留为默认，反之亦然。这就是我现在正在做的事情。

** 编辑 **

我最终同意了 Dawson Loudon 的一部分答案，并根据 Barmar 的评论创建了另一个函数，如下所示:

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

Answer 1

A 元素作为按钮似乎不太合适，只需使用 img。

无论如何，将第一个选择与第一个以外的选定选项一起使用的函数可能类似于:

function getPath() {
  var select;
  var args = arguments;

  for (var i=0, iLen=args.length; i<iLen; i++) {
    select = document.getElementById(arg[i]);

    if (select && select.selectedIndex > 0) {
      window.location = 'http://www.mysite.com/download/' + select.value;
    } 
  } 
}

上面期望第一个选项是默认选择的，因此如果选择了它，或者根本没有选择任何选项，则选择的 selectedIndex 将分别为 0 或 -1。我将通过将所选属性添加到第一个选项来确保选择一个选项:

  <option value="default" selected>Select File</option>

调用的是:

<img src="buttonImage.jpg" onclick="download('one', 'two');">

尽管您可能想向选择的元素添加一个类，并使用 getElementsByClassName 或类似方法获取它们，然后循环该集合，而不是对 id 进行硬编码。