title: jquery change single div based on two dropdown selections
body: <p>I'm quite new to jquery. I've tried searching for this but can't find any good examples. </p>
  
  <p>I'm trying to create a selection process using two dropdown lists. Each list has three options. The user will select an option from list 1, then an option from list 2. The combination of these options will then make a particular div show.</p>
  
  <p>If the user then changes one of the list selections, the div changes to reflect the new combination.</p>
  
  <p>I've tried with just at least getting one of the combinations to work, but can't. So far I have:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $('.boxy').hide();
      $('#option1option3').show();
      $("#selectField1, #selectField2").on("change", function(){
          $('.boxy').hide();
          $('#'+$('#selectField1')+$('#selectField2').val()).show();
      });
  });
  &lt;/script&gt;
  
  &lt;select id="selectField1"&gt;
      &lt;option value="option1"&gt;option1&lt;/option&gt;
      &lt;option value="option2"&gt;option2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="selectField2"&gt;
      &lt;option value="option3"&gt;option3&lt;/option&gt;
      &lt;option value="option4"&gt;option4&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="option1option3" class="boxy"&gt;Content 1 and 3&lt;/div&gt;
  &lt;div id="option1option4" class="boxy"&gt;Content 1 and 4&lt;/div&gt;
  &lt;div id="option2option3" class="boxy"&gt;Content 2 and 3&lt;/div&gt;
  &lt;div id="option2option4" class="boxy"&gt;Content 2 and 4&lt;/div&gt;
  </code></pre>
  
  <p>I can do this using a single list and div (like <a href="http://code-tricks.com/change-div-on-changing-drop-down-using-jquery/" rel="nofollow">here</a>), but can't figure out how to implement as I've described above.</p>
  
  <p>Thanks for any help</p>