Three Select Boxes Interacting to Yield One Result - HTML, JavaScript or jQuery

问题

I have three select boxes:

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

Based on what the user selects for these three boxes, I want to download a file like so, for example:

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

Basically, the file is an installer, that can be a certain product, a specific version, and the architecture (using EXE as an example; will have DMG and ZIP too):

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

I understand that my approach may not be the best, so I'm open to suggestions, but if I could get this approach to work, that would be great.

For the JavaScript I was thinking something like this:

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

I guess my main problem is how to select what select values are chosen in the three select boxes. I'm trying to glue together the results from the three select boxes and determine a path from that.

NOTE

I actually had more select boxes than I actually wrote about, but the principles are the same. Using answers below, I was able to get the file to be correct. Thanks for all the help!

回答1:

jsFiddle Demo

​$(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');
    }
}
​

回答2:

You can do something like this using jQuery's .map() function

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

回答3:

Give your <select> boxes a class:

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

Now, you can use map() to extract the selected options into an array:

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

You can test to see if any default options have been chosen using inArray:

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

From there, you can join the strings together into your final URL:

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

Demo: http://jsfiddle.net/A2q47/3/

回答4:

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

something like this should work http://jsfiddle.net/9a8YH/4/

来源：https://stackoverflow.com/questions/13849558/three-select-boxes-interacting-to-yield-one-result-html-javascript-or-jquery