0

私は次のselectような2つのボックスを持っています:

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

これは 1 つのselectボックスでは問題なく機能しますが、同じボタン イメージの使用方法がわかりません。ああ、p.class=button_imageホバー効果のあるボタンの背景画像があります。

これらのボックスを別々にしたい理由selectは、それぞれがファイルのグループ (32 ビットと 64 ビットなど) を表しているからです。そのため、ページのデザインに合わないため、組み合わせることができません。

を使用して 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を使用しているため、これは私が試したオプションにすぎません。それらが機能する限り、私は任意の数のオプションに満足できます.

ありがとう。

** 編集 **

この設計には欠陥がある可能性があります。ただし、意図は、ボックス 1 のファイルをダウンロードするか、ボックス 2 のファイルをダウンロードすることです。1 つの選択が行われた場合は、もう 1 つの選択が行われる必要がdefaultあり、その逆も同様です。これは私が今取り組んでいるものです。

** 編集 **

私は最終的にドーソン・ラウドンの答えの一部に行き着き、次のようなバーマーのコメントに基づいて別の関数を作成しました:

// 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 属性を最初の属性に追加することで、1 つのオプションが確実に選択されるようにします。

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

呼び出しは次のとおりです。

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

ただし、id をハードコーディングするのではなく、select 要素にクラスを追加し、getElementsByClassName などを使用してそれらを取得し、そのコレクションをループしたい場合があります。

于 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 に答える