Question

I have three different select boxes that users can choose from. I need to access the values of all three selections at once and can’t figure out how to do it. Let me explain what I mean with an example:

<select id="hue">
// Options
</select>

<select id="sat">
// Options
</select>

<select id="lig">
// Options
</select>

Now, to access the choice of each select box I use the following code:

$('#hue').filter(':selected').val().change(function(){
    hueVal = $(this).val();
    return hueVal;
})

$('#sat').filter(':selected').val().change(function(){
    satVal = $(this).val();
    return satVal;
})

$('#lig').filter(':selected').val().change(function(){
    ligVal = $(this).val();
    return ligVal;
})

Now, what I want to do is get access to the three returned values (hueVal, satVal and ligVal) at the same time in a new jquery call – like follows:

$('#header').css('background-color', hsl(hueVal+','+satVal+','+ligVal));

The problem is, since each value is within a function I don’t know how to get access to all three of them at once outside of their respective functions.

Any idea how I can do this?

Answer 1

Try this:

$('select').change(function() {
    var hue = $('#hue').val(),
        sat = $('#sat').val(),
        lig = $('#lig').val();

    $('#header').css('background-color', 'hsl('+ hue +','+ sat +','+ lig +')');
}).trigger('change');

edit: the value for background-color needs to be a full string