You are a legend. It works I learn along the way :)
Thanks

On May 6, 6:38 am, motob <[EMAIL PROTECTED]> wrote:
> elle,
>
> Since you're going to have 8 fieldsets, why don't you have some code
> that will automatically close all of them when the change function is
> called, then you can use a variable as your jQuery selector so you
> don't have to use an IF statement. You could do something like this.
>
> $(".product-type").change(function(){
>   var $value = $(this).val(); //this would store 'filters' for example
>   $("fieldsets.options").slideUp("slow"); //close all fieldsets
>   $("fieldsets." + $value).slideDown("slow"); //this will then show
> the fieldset with 'filters' as a class.
>
> });
>
> This example should take care of all of your select option cases
> without using an IF statement. You'll just have to make sure that each
> one of your fieldsets has a class value of the respective option
> value.
>
> On May 2, 5:09 am, elle <[EMAIL PROTECTED]> wrote:
>
> > @Dave: when I selected the first product it showed me its options.
> > Changing an option didn't do a thing.
> > Clicking again on first product, hid its options.
>
> > @motob: I used this instead:
> > $(".product-type").change(function(){
> >                 if($(this).val() == "filters"){
> >                         $('fieldset.filters').slideDown("slow");
> >                 } else {
> >                         $('fieldset.filters').slideUp("slow");
> >                 }
> >                 });
>
> > Because I have about 8 products not only 2. It worked for one so, I
> > guess it will work for all 8 if I define it separately for each
> > product.
>
> > First of all thank you.
> > Second, is there anyway to streamline this code instead of repeating
> > it 8 times? or should I just bite the bullet?
>
> > What do you reckon?
>
> > Cheers,
> > Elle
>
> > On May 2, 12:35 am, motob <[EMAIL PROTECTED]> wrote:
>
> > > Instead of adding click listeners to the option elements, add a change
> > > listener to the overall <select> menu. Once the change event is fired,
> > > determine which value is choosen, then show/hide the appropriate
> > > option fieldset. NOTE: You may want to change the values of the option
> > > elements so that they don't contain spaces. I'm not sure if those
> > > spaces will cause problems or not.
>
> > > $(document).ready(function(){
> > >   $("#product-type").change(function(){
> > >     if($(this).val() == "product a"){
> > >       $('fieldset.producta').slideDown("slow");
> > >       $('fieldset.productb').slideUp("slow");
> > >     }
> > >     else {
> > >       $('fieldset.productb').slideDown("slow");
> > >       $('fieldset.producta').slideUp("slow");
> > >     }
> > >   });
>
> > > });
>
> > > The above code is untested, but that is the basic idea of what you
> > > would need to do.
> > > On May 1, 4:57 am, Waz and Elle <[EMAIL PROTECTED]> wrote:
>
> > > > Hi again,
>
> > > > I have a form with products select menu. I would like to show and hide
> > > > product specific options as the user selects them. Now, I can show the
> > > > product options but I don't know how to hide them if the user selects
> > > > a different product.
>
> > > > My HTML is:
> > > > .... snip...
> > > > <select id="product-type" name="product-type" class="product-type">
> > > >                         <option value="select" 
> > > > selected="selected">-Select-</option>
> > > >                         <option value="product a" 
> > > > class="producta">Product A</option>
> > > >                         <option value="product b" 
> > > > class="productb">Product B</option>
> > > >                 </select></p>
> > > > <fieldset class="producta options"> ... </fieldset>
> > > > <fieldset class="productb options"> ... </fieldset>
> > > > .... snip ....
>
> > > > My code at the moment is:
>
> > > > $('#orderform').find('.options').hide();
> > > > $('.product-type').find('option.producta').click(function(select) {
> > > >                         $('fieldset.producta').slideDown("slow");
> > > >                 });
> > > > $('.product-type').find('option.productb').click(function(select) {
> > > >                         $('fieldset.productb').slideDown("slow");
> > > >                 });
>
> > > > So, if I change the user changes his/her mind between product a to
> > > > product b, the options stay visible, and I'm not sure how to hide them
> > > > again.
>
> > > > Also, if the user already entered information in the fieldset's
> > > > fields, should I reset them when I hide them?
>
> > > > Any advice will be great.
> > > > Thanks,
> > > > Elle

Reply via email to