Question

我有两个select框，如下：

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

这是我的download功能：

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

这适用于一个select框，但我似乎无法弄清楚如何使用相同的按钮图像。哦，是的，p.class=button_image的背景图片是一个带有悬停效果的按钮。

我希望这些select框分开的原因是因为它们各自代表一组文件，例如32位与64位。所以它们不能合并，因为它不会随着页面设计而流动。

我已经使用getElementById在PHP中尝试了一些if / else块但是我遇到了问题。这是我尝试过的，似乎只是部分工作：

<?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进行服务器端编程。只要他们有效，我会对任意数量的选择感到满意。

感谢。

**编辑**

这种设计可能存在缺陷。但目的是下载第一个文件或下载第二个文件。如果做出一个选择，那么另一个应该休息到default，反之亦然。这就是我现在正在做的事情。

**编辑**

我结束了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;
    } 
  } 
}

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

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

，电话是：

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

虽然你可能想要在select元素中添加一个类，并使用getElementsByClassName或类似的方法获取它们并循环遍历该集合，而不是对id进行硬编码。

选择使用一个按钮从两个选择框之一下载文件 - JavaScript

1 个答案: