0

我有三个选择框：

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

根据用户为这三个框选择的内容，我想下载这样的文件，例如：

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

我想我的主要问题是如何选择在三个选择框中选择的选择值。我试图将三个选择框的结果粘合在一起，并从中确定一条路径。

笔记

实际上，我的选择框比我实际写的要多，但原理是一样的。使用下面的答案，我能够使文件正确。感谢所有的帮助！

4

4 回答 4

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