Additional choices based on multiple select values
HTML
<label for="firstChoice">First Choice</label>
<select id="firstChoice" name="firstChoice">
<option value="">Select</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
</select>
<label for="secondChoice">Second Choice</label>
<select id="secondChoice" name="secondChoice">
<option value="">Select</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
</select>
<div class="additional">
Stuff goes here
</div>
CSS
body {
font-family:sans-serif;
font-size:0.8em;
}
label, select {
display:block;
padding:0.3em;
}
select {
margin-bottom:1em;
}
.additional {
border-bottom:1px solid #DDD;
border-top:1px solid #DDD;
margin:1em 0;
padding:0.8em 0;
display:none;
}
JavaScript
var arr;
var $select = $('#firstChoice,#secondChoice');
$select.on('change', function () {
var str = "Option 1";
if ($('#firstChoice').val() === str || $('#secondChoice').val() === str) {
$('.additional').show();
} else {
$('.additional').hide();
}
});