0

我有两个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 位。所以它们不能结合起来，因为它不会随着页面设计而流动。

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

<?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';
}
4

2 回答 2

2

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。我会通过将 selected 属性添加到第一个选项来确保选择一个选项：

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

电话是：

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

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

于 2012-11-08T23:48:41.637 回答
1

尝试替换这个：

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

和：

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

然后用这个替换你的下载功能：

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;
    }
}
于 2012-11-08T23:44:49.323 回答