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
