My approach involves utilizing a select dropdown to trigger various events by assigning unique classes to each select option. Here is an example :
<select name='topic' class='long box validate-select'>
<option value="null">Questions?</option>
<option value='First' class='select1'>Question 1</option>
<option value='Second' class='select2'>Question 2</option>
</select>
<div id="faq1"> - </div>
<div id="faq2"> - </div>
<script>
$(document).ready(function() {
$('option.select1').click(function(){
$('#faq1').fadeIn('fast');
return false;
});
$('.select2').click(function(){
$j('#faq2').fadeIn('fast').siblings().hide();
return false;
});
});
</script>
Although this method functions correctly in Firefox, it does not produce the desired result in Internet Explorer (versions 7 and 8). Is there anyone who can suggest modifications that will work across all browsers, including IE?