Wednesday, June 3, 2009

jquery to show a div depending on values of two selects

Using Jquery:


$(document).ready(function() {
$('select#article-type').change(function() {
var type = $(this).val();
var section = $('#article_sections').val();
(type == '500') && (section > 20) && (section < 40)
// higher education event
? $('#event-info').slideDown()
: $('#event-info').slideUp("fast");
return type;
}).triggerHandler('change');
});

$(document).ready(function() {
$('select#article_sections').change(function() {
var section = $(this).val();
var type = $('#article-type').val();
(type == '500') && (section > 20) && (section < 40)
// lifenews sections 31, 32, 33, 34, 35
? $('#event-info').slideDown()
: $('#event-info').slideUp("fast");
}).triggerHandler('change');
});


The trick of this is finding the value of the other select and using it in the calculations for the change trigger.

No comments:

Post a Comment