its because of these lines...
var i = $('option', this).index( $(':selected')[0]);
and
var j = $('option', this).index( $(':selected')[0]);
you're using $(':selected')[0] which will look for all 'selected'
options in the the context of the whole document, and return the first
element ( [0] ) it found.
you could simply use
var i = $(this).val();
On Nov 23, 12:59 pm, Allan <[EMAIL PROTECTED]> wrote:
> 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 = $("[EMAIL PROTECTED]'IDoption']").hide();
> var $rnOptionDivs = $("[EMAIL PROTECTED]'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
