Question

I have stumbled upon a problem.

I have two different select fields. Each of these have color options: blue, green, black, yellow. I want to show different divs depending on which selctions you make like so:

Selection yellow+black shows div#1
Selection black+yellow shows div#2
etc.
etc.

How can I do this in a smart way?

Update:

Here is a code snippet I have right now (it does what I want but only depending on one select element):

<script>
$(document).ready(function() {
  $(function() {
    $('#thecolor').change(function(){
        $('#box_image, #box_image2, #box_image3, #box_image4').hide();
        $('.' + $(this).val()).show();
    });
  });
});

<select id="thecolor">
   <option>Choose outer color</option>
   <option value="blue">Blue</option>
   <option value="red">Red</option>
   <option value="dark_green">Green</option>
   <option value="purple">Purple</option>
 </select>

and then

<div id="box_image" style="display:none;" class="blue">
  <img src="images/wine-bottle-box_blue.png"/>
</div>

Answer 1

To do this you can use the toggle function in jQuery to show/hide an element based on the values of 2 select lists. Just hook both select lists up to the same click handler and check the condition.

var $s1 = $('#select1').change(change);
var $s2 = $('#select2').change(change);

function change(){
    $('#div1').toggle($s1.val() == 'Yellow' && $s2.val() == 'Black')
    $('#div2').toggle($s1.val() == 'Black' && $s2.val() == 'Yellow')
};

Live example: http://jsfiddle.net/6AUn6/