jquery change single div based on two dropdown selections

jquery change single div based on two dropdown selections

I'm quite new to jquery. I've tried searching for this but can't find any
good examples.
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.
If the user then changes one of the list selections, the div changes to
reflect the new combination.
I've tried with just at least getting one of the combinations to work, but
can't. So far I have:
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.boxy').hide();
$('#option1option3').show();
$("#selectField1, #selectField2").on("change", function(){
$('.boxy').hide();
$('#'+$('#selectField1')+$('#selectField2').val()).show();
});
});
</script>
<select id="selectField1">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
<select id="selectField2">
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
<div id="option1option3" class="boxy">Content 1 and 3</div>
<div id="option1option4" class="boxy">Content 1 and 4</div>
<div id="option2option3" class="boxy">Content 2 and 3</div>
<div id="option2option4" class="boxy">Content 2 and 4</div>
I can do this using a single list and div (like here), but can't figure
out how to implement as I've described above.
Thanks for any help