Three Select Boxes Interacting To Yield One Result - HTML, JavaScript Or JQuery
I have three select boxes:
Solution 1:
$(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');
}
}
Solution 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);
Solution 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';
Solution 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/
Post a Comment for "Three Select Boxes Interacting To Yield One Result - HTML, JavaScript Or JQuery"