0

3 つの選択ボックスがあります。

<select id="one">
    <option value="default">Select Product</option>
    <option value="value-a1">string1</option>
    <option value="value-a2">string2</option>
    <option value="value-a3">string3</option>
</select>

<select id="two">
    <option value="default">Select Version</option>
    <option value="value-b4">string4</option>
    <option value="value-b5">string5</option>
    <option value="value-b6">string6</option>
</select>

<select id="three">
    <option value="default">Select Architecture</option>
    <option value="value-c6">string7</option>
    <option value="value-c7">string8</option>
    <option value="value-c8">string9</option>
</select>

ユーザーがこれら 3 つのボックスで選択した内容に基づいて、次のようなファイルをダウンロードします。

mysite.com/download/value-a1_value-b2_value-c3

基本的に、ファイルは特定の製品、特定のバージョン、およびアーキテクチャのインストーラーです (例として EXE を使用します。DMG と ZIP も含まれます)。

mysite.com/download/product-a_version-b_arch-64.exe

私のアプローチが最善ではないことを理解しているので、提案を受け付けていますが、このアプローチを機能させることができれば、それは素晴らしいことです.

JavaScript については、次のようなことを考えていました。

function download_file(version_id, os_id, arch_id) {

    if (product_id == 'default' && version_id == 'default' && 
        arch_id == 'default') {
        return;
    }

    else if (product_id != 'default') {
        window.location = 'mysite.com/download/Install_' +
            product_id + '_' + version_id + '_' + arch_id + '.exe';
    }
}

私の主な問題は、3 つの選択ボックスでどの選択値が選択されるかを選択する方法だと思います。3 つの選択ボックスからの結果をまとめて、そこからパスを決定しようとしています。

ノート

実際には、実際に書いたよりも多くのセレクト ボックスがありましたが、原則は同じです。以下の回答を使用して、ファイルを正しくすることができました。助けてくれてありがとう！

4

4 に答える 4

1 
var product_id=document.getElementById("one").value;
var version_id=document.getElementById("two").value;
var arch_id=document.getElementById("three").value;

このようなものは動作するはずですhttp://jsfiddle.net/9a8YH/4/

于 2012-12-12T22:35:59.763 に答える
1

jsFiddleデモ

​$(function() {
    var downloadButton = $( selector-for-your-button );

    $(downloadButton).click(function() {

        download_file( $('#one').val(), $('#two').val(),
                      $('#three').val());

    });
});

function download_file(product_id, version_id, arch_id) {

    // if any of them is default, cancel (use or ||)
    if (product_id == 'default' || version_id == 'default' || 
        arch_id == 'default') {
            alert("choose stuff!");
        return;
    }

    else if (product_id != 'default') {
        //window.location = 'mysite.com/download/Install_' +
        //    product_id + '_' + version_id + '_' + arch_id + '.exe';
        console.log(product_id + '_' + version_id + '_' + arch_id + '.exe');
    }
}
​
于 2012-12-12T22:25:52.670 に答える
1

<select>あなたの箱にクラスを与えてください：

<select id="one" class="installer-option">
    ...

map()これで、選択したオプションを配列に抽出するために使用できます。

var options = $('.select').map(function() { return $(this).val(); });

以下を使用して、デフォルトのオプションが選択されているかどうかをテストできますinArray。

if ($.inArray('default', options) != -1) {
    // There's a default option
}

そこからjoin、文字列をまとめて最終的な URL にすることができます。

var file = options.join('_') + '.exe';

デモ: http://jsfiddle.net/A2q47/3/

于 2012-12-12T22:17:25.260 に答える
1

jQuery の.map()関数を使用して、このようなことができます

// check if all three select has a value selected besides default - return false if any are default
if ($('select').filter(function() {
    return this.value == 'default';
}).length > 0) {
   return false;
}

// using jQuery's map function - get the values - turn into array - join with '_'
var newString = $('select').map(function(i, v) {
    return v.value;
}).get().join('_');
console.log(newString);

http://jsfiddle.net/4PCfE/

于 2012-12-12T22:17:40.767 に答える