[jQuery] Problem 2 select boxes in same form
Newbie alert!
I'm using jQuery to handle the show/hide of a div depending on option
selected in a select box (based on code posted here previously):
$(document).ready(function() {
var $idOptionDivs = $("div[@id^='IDoption']").hide();
var $rnOptionDivs = $("div[@id^='reasonopt']").hide();
//display div's related to ID Option
$('#doc_id').change(function() {
var i = $('option', this).index( $(':selected')[0]);
$idOptionDivs.hide().eq(i).show();
});
//display div's related to registration reason
$('#reason').change(function() {
var j = $('option', this).index( $(':selected')[0]);
$rnOptionDivs.hide().eq(j).show();
});
});
The above code is linked to two simple select boxes - won't bore you
with that code.
Works fine if there is 1 select box but problem is when adding a
second select box (say, another part of a registration form) the
second select box doesn't pass the correct index - it always passes
back '-1' no matter which option is selected.
I know the code will work but I just can't understand why this error
is occurring - bizarre thing is that when switching round the order of
the select boxes the first one always works - second doesn't.
Not sure if this is a jQuery issue but any help would be appreciated!!
Thanks
Al